- 1. Introdução
- 2. Resumo do projeto
- 3. Público-alvo
- 4. Objetivos
- 5. Como utilizar
- 6. Definição de produto
- 7. Considerações técnicas
- 8. Aplicação final
Site realizado como primeiro projeto de desenvolvimento web do bootcamp de Front-End da Laboratória Brasil com o objetivo de aprender e utilizar HTML, CSS e JavaScript como ferramentas de desenvolvimento.
A aplicação web desenvolvida tem como objetivo permitir ao usuário cifrar e decifrar palavras e frases utilizando a Cifra de César.
A cifra de César é um dos primeiros tipos de criptografias conhecidas na história e 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.
O usuário da aplicação deverá escrever a mensagem que deseja cifrar ou decifrar (no respectivo campo correspondente) e escolher o número de posições que deseja deslocar para a cifra ou o número recebido junto com a mensagem para ser capaz de decifra-la.
O público-alvo do produto são crianças em fase de alfabetização e domínio das operações matemáticas básicas, pessoas educadoras e pais e/ou responsáveis interessados em tornar o aprendizado e fixação infantil do alfabeto e operações de soma e subtração mais divertidos e funcionais.
- Objetivos relativos aos usuários
O produto tem como objetivo ajudar no desenvolvimento infantil proporcionando uma interface de fácil entendimento e manejo.
- Objetivos de aprendizagem
Ao utilizar a aplicação, as crianças em fase de desenvolvimento devem ser capazes de fixar os conhecimentos adquiridos no ambiente escolar, sendo incentivadas a gravar a ordem das letras no alfabeto e os processos de soma e subtração para prever qual será o resultado da cifra antes de ser mostrada em tela.
Para utilizar a aplicação acesse o site Mensagem Secreta
Para codificar a mensagem:
- Escreva a mensagem que deseja codificar no campo onde está escrito "Escreva a mensagem" no quadro "Escrever mensagem secreta";
- Escolha o número que deverá ser utilizado para codificar a mensagem;
- Junto com um adulto responsável tente prever qual será a mensagem que irá aparecer como mensagem secreta;
Para isso, basta contar o número escolhido para a frente seguindo as letras do alfabeto e você deverá ser capaz de prever qual mensagem codificada aparecerá em seguida.
- Clique no botão escrito "Criar mensagem secreta" e confira se a sua previsão estava certa!;
- Copie a sua mensagem e envie junto com o número escolhido para que seus amigos descubram a mensagem secreta!
Para decodificar a mensagem:
- Escreva a mensagem que deseja decodificar no campo onde está escrito "Escreva a mensagem" no quadro "Ler mensagem secreta";
- Escolha o número que você recebeu junto com a mensagem para decodifica-la;
- Junto com um adulto responsável tente prever qual a mensagem recebida como mensagem secreta;
Para isso, basta contar o número recebido para trás seguindo as letras do alfabeto e você deverá ser capaz de prever qual mensagem você recebeu.
- Clique no botão escrito "Ler mensagem secreta" e confira se a sua previsão estava certa!;
- Agora basta escrever uma mensagem secreta respondendo os seus amigos usando o passo-a-passo para codificar a mensagem!
O primeiro passo para a definição do produto foi pensar qual seria a aplicação desejada e definir seu comportamento através de um fluxograma com a jornado do usuário.
- Fluxograma de jornada do usuário
O segundo passo foi desenhar um protótipo para melhor entendimento e visualização do produto final.
- Protótipo do produto
Em seguida foi feita a definição da paleta de cores a ser utilizada na aplicação através do site Adobe Color. Por se tratar de um produto com o público alvo infantil a escolha foi por uma paleta colorida e que tornasse a aplicação mais chamativa.
- Paleta de cores
Para o desenvolvimento da aplicação foram utilizadas as ferramentas:
- Git para o controle de versionamento;
- GitHub e GitHub Pages para o deploy da aplicação.
A linguagem de programação utilizada pra o desenvolvimento foi JavaScript Vanilla e as linguagens de marcação:
- HTML para a estruturação da aplicação;
- CSS para a estilização.
A interface final da aplicação foi desenvolvida e aprimirada com o passar do desenvolvimento sendo entregue da seguinte forma:
