turboel / javascript

testando JS

Prova 01 - HTML, SCSS & RWD

Desenvolvimento de Aplicações Web

João Eduardo Montandon

Setor de Informática - COLTEC/MG

Valor: 8 pontos

Curriculum Vitae

A web é a vitrine de qualquer profissional atualmente. Por meio de um portfolio na web, é possível mostrar ao mundo suas habilidades e especialidades. Nessa prova, você deverá criar uma página que representará seu currículo. Mais especificamente, seu site deverá conter quatro seções principais:

1. Resumo
2. Experiência & Formação
3. Habilidades
4. Social & Rodapé

Algumas restrições foram definidas para cada uma das seções descritas anteriormente, assim como para o site como um todo. Os requisitos estão descritos abaixo:

Layout da Página

A página deverá suportar três tipos diferentes de layout: Desktop, Tablet e Mobile. Recomenda-se que a divisão entre as telas aconteça com base nos seguintes parâmetros:

• Desktop com largura de pelo menos 960px
• Tablet com largura entre 648px e 959px
• Mobile com largura de até 647px

Para implementação do layout responsivo, você deverá utilizar um layout de grid de 16 colunas. As imagens abaixo consistem em sugestões de protótipos para cada um dos três layouts. Você pode optar por um layout diferente, desde que obedeça às seguintes restrições:

• Presença obrigatória de rodapé nos três layouts
• Layout Desktop e Tablet com pelo menos duas áreas lado-a-lado
• Layout Mobile totalmente verticalizado
• Os três layouts devem ser estruturados de formas distintas.

->  <- ->  <- ->  <-

Estilo Padrão

Você deverá customizar a fonte da página utilizando dois estilos diferentes: Uma para títulos e destaques, e outra para texto e outras informações convencionais. Sugestão: utilize uma fonte do Google Fonts.

Além disso, você deverá definir uma paleta de 5 cores distintas para serem utilizadas na página. Sugestão: utilize uma paleta pronta do Adobe Kuler.

Você deverá utilizar ícones para para complementar as informações de pelo menos duas seções.

Resumo

O resumo deverá contar com foto, local, informação de contato (e-mail e telefone), além de um pequeno texto de resumo (máximo 2 parágrafos).

Você deverá aplicar algum tipo de filtro sobre a foto, como borrado, escurecimento, etc.

Aplique uma cor de destaque sobre a área de resumo, para que se possa se destacar das demais.

Experiência & Formação

Ambos os tópicos deverão fazer parte da seção principal do site. As experiências deverão mostrar todos os projetos e opoturnidades na qual você já trabalhou antes. Cada oportunidade deverá ter um título, data de início e fim, e um pequeno texto resumindo as suas atividades. Caso você esteja atuando no momento em um dos projetos listados, esse projeto deverá ganhar algum tipo de destaque.

De forma análoga, a formação também deverá constar com um título (nome da instituição), data de início e fim, e uma pequena descrição dizendo qual curso foi feito. Assim como na experiência, deve-se destacar qual a sua formação sendo cursada no momento.

Conhecimento Técnico

Essa seção deverá exibir quais são suas capacidades técnicas. Você deverá exibir cada capacidade em um formato similar a de um cartão. Esses cartões deverão ser apresentar efeitos animados ao interagirem com usuário (escala, mudança de cores, etc). É importante ressaltar que a seção de conhecimento Técnico deverá pertencer a mesma área de experiência e formação da página.

Social & Rodapé

Essa seção deverá ser estruturada no formato de uma barra inferior. Essa barra deverá mostrar o acesso às redes sociais no formato de ícones em um tamanho grande o suficiente para ser confortável. Ainda, é importante adicionar um texto de copyright em seu rodapé.

Publicando seu CV no GitHub (1 pt extra)

Publique seu CV utilizando o GitHub pages e ganhe um ponto extra.

Consulta

Vocês podem consultar apenas os materiais abaixo:

• Slides da disciplina
• Seus exercícios
• http://fonts.google.com
• http://fontawesome.io/
• http://www.w3schools.com
• https://color.adobe.com
• https://css-tricks.com/snippets/css/clear-fix/