AP2-PCA_EIN421-80(1)

Prévia do material em texto

NÚCLEO DE EDUCAÇÃO A DISTÂNCIA (NEAD) 
 
AVALIAÇÃO DA AP2 
 
APLICAÇÃO PRÁTICA 
 
Turma: EIN421-80 - PCA: INTRODUÇÃO AS APLICAÇÕES WEB 
Professor: José Oliveira Valadão 
Semestre: 2019.2 
Aluno(a): Todos 
 
Contextualização 
 
O Projeto Curricular Articulador (PCA), uma unidade curricular obrigatória, que 
tem como objetivo geral criar uma solução para situações problema da prática 
profissional, visando a consolidação das competências da trabalhabilidade. É uma 
unidade curricular chave porque oportuniza a articulação dos conhecimentos, sendo 
desenvolvida em todos os fluxos das matrizes curriculares dos cursos. 
O PCA visa contribuir para uma aprendizagem significativa, buscando a 
autonomia intelectual e o desenvolvimento profissional e pessoal dos profissionais em 
formação (aluno), por meio da articulação entre o ensino, a pesquisa e a extensão e 
do desenvolvimento de solução para a situação problema (produto) no âmbito de 
atuação do egresso. 
Esse projeto do PCA, em específico, é relativo a uma Aplicação Web, onde 
inicialmente vocês devem projetar e desenvolver essa aplicação. Ela será em 3 
etapas (AP1, AP2 e AP3). Cada passo do projeto PCA, será a integração das 
competências estudadas nesta fase, porém para o início, todos deverão efetuar 
pesquisas e estudos atinentes à uma aplicação Web básica. Nesta etapa, você 
deverá pesquisar como se desenvolve um formulário em HTML e uma tabela em html. 
 
Proposta de Trabalho 
 
Atividades: 
 
 
2ª Etapa do PCA: (Desafio) 
 
1) Você deverá pesquisar como é o desenvolvimento de um Formulário em 
HTML, implementando as tag’s: <div>, <form>, <fieldset>, <legend>, <caption>, 
<label>, <input>, <select>, <option>, <textarea>. 
 
2) Você desenvolverá, após pesquisa, os seguintes formulários abaixo: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4) Você deverá pesquisar como é o desenvolvimento de uma Tabela em HTML, 
implementado as tag’s: <tbody>, <theader>, <tfooter>, <tr>, <th>, <td>. 
 
5) Criar uma página HTML de nome “tabela.html”, conforme imagem abaixo, com a 
aparência abaixo, com o uso de uma tabela alinhada ao centro, com espaçamento de 
2px entre as células e espaçamento interno de 2px em cada célula: 
 
 
 
 
 
CSS (Folha de Estilo do Formulário) 
Você deve envolver todo o 
formulário com a tag: 
Dicas: 
<div class = ”container”> 
 
CSS (Folha de Estilo do Formulário) 
Você deve envolver todo o 
formulário com a tag: 
Dicas: 
<div class = ”container”> 
 
 
 
 
 
 
Observações: exige-se a aplicação das estilizações abaixo mencionadas com o uso 
exclusivo de uma folha de estilos CSS externa: 
 
 Sobre a tabela ainda, sem borda e com largura de 600px; 
 Uso de três tons da cor azul: #0D5188 (azul escuro), #66C5E3 (azul médio) e 
#C7E7F3 (azul claro); 
 Uso de fonte da família “Arial”, com tamanho 12px; 
 Título da tabela: cor branca; 
 Nomes das cidades: cor de código #0D5188 (azul escuro); 
 Cor de fundo das células de posição: prata (Cinza); 
 Com exceção das posições e dos quantitativos populacionais, os demais 
textos estão em formato negrito; 
 Margem interna (Padding) de 4px. 
 
 
6) Desenvolver a tabela abaixo com estilização (CSS) a seu gosto, porém, a mesma 
deverá ter o todos os dados com as suas devidas posições (na linha e na coluna) na 
imagem: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Sugestões: 
 
 Link’s para estudo e desenvolvimento do Projeto PCA: 
 
 https://developer.mozilla.org/pt-BR/ 
 https://www.w3schools.com/ 
 https://www.maujor.com/ 
 https://getbootstrap.com.br/ 
 
 Link’s para IDE’s de desenvolvimento: 
 
 https://notepad-plus-plus.org/download/v7.7.1.html 
 https://www.sublimetext.com/ 
 
Orientações 
 
 Os arquivos deverão ser enviados pela plataforma AVA. 
 
 Todo o projeto deve ser compactado e enviado pela plataforma, com 
todos os arquivos; 
 
 Você poderá fazer a Folha de Estilo (CSS), diretamente no código HTML, 
na tag <header>. Mas, se quiser e souber, pode criar uma pasta e colocar 
o arquivo nesta pasta e criar link com o arquivo, conforme imagem 
abaixo: 
 
 É para tentarem fazer, conforme aparece nas imagens, com toda a 
estilização, porém, também vou avaliar a confecção do Formulário e a 
Tabela com todos os elementos html envolvidos, bem como os dados que 
devem ser expostos com seu devido posicionamento; 
 
 Tudo deve ser desenvolvido de acordo com a Estrutura do HTML5, 
conforme a imagem abaixo: