- Front-end desenvolvido de acordo com os arquivos PSD da prova;
- Resultado responsivo com versão mobile deve condizente ao arquivo PSD mobile;
- Código semântico, bem organizado, estruturado e correto;
- Nenhum framework ou pré processadores CSS foram utilizados;
- O conteúdo final está totalmente funcional na última e penúltima versão dos principais navegadores, como o Google Chrome, Mozilla Firefox, Safari e Microsoft Edge, e Opera.
- Todas as funcionalidades requisitadas pela prova foram implementadas no projeto.
-
O projeto faz o uso do automatizador de tarefas Gulp Js, sendo utilizado mais de 10 plugins nativos do gulp para operar nas funções;
-
Efeitos animados em todos os elementos interativos:
dot-prova-pleno-animations.mp4
[alt: vídeo de ilustração dos principais efeitos animados]
Execute o seguinte comando em seu terminal para instalar as dependências gulp:
npm install
Estão disponíveis para uso as seguintes tasks:
-
gulp default
ougulp
- Constrói a pasta dist para receber o diretório src otimizado. A otimização oferece: arquivos de imagem, estilo e script minificados, concatenados, compilados, transpilados, com sourcemap e prefixes.
-
gulp watch
- "Assiste" a pasta src, logo, qualquer mudança dentro do diretório executará a tarefa
glup default
. É recomendado NÃO criar nenhum arquivo fora da pasta assets.
- "Assiste" a pasta src, logo, qualquer mudança dentro do diretório executará a tarefa
-
gulp clsdist
- Deleta a pasta dist.
-
gulp imgmin
- Minifica imagens em PNG, JPEG, GIF e SVG. Use ela apenas se estiver tendo problemas com o tinypng, pois o minificador do tiny já é executado por padrão a partir da task
gulp default
.
- Minifica imagens em PNG, JPEG, GIF e SVG. Use ela apenas se estiver tendo problemas com o tinypng, pois o minificador do tiny já é executado por padrão a partir da task
Como forma de mostrar o quão poderoso é o Gulp Js, logo abaixo estão os resultados de seu uso dentro do sistema:
Podemos dizer que a pasta dist é o resultado da otimização completa sobre a pasta src, visto que, tivemos um ganho de 70% de performance ao calcularmos a diferença entre o peso dos dois diretórios da aplicação.
Além disso, o total de 18 arquivos foi reduzido em 10, economizando os requests da página e aumentando sua velocidade de carregamento. Isso tudo devido à concatenação de arquivos CSS e JS.
Caso apareça o erro "ReferenceError: primordials is not defined" ao executar alguma task, realize os seguintes passos solucioná-lo:
- Passo 1 - crie um arquivo json chamado npm-shrinkwrap (caso ele já exista, apague-o e crie outro);
- Passo 2 - cole o seguinte código nele:
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
- Passo 3 - execute
npm install
em seu terminal, e o erro sumirá.