Roteiro Aula Prática Programação para Internet em Front-End
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: Programação para internet em front-end
OBJETIVOS
Definição dos objetivos da aula prática:
Desenvolver uma interface front-end simples em HTML e CSS contendo algum texto
informativo (receita) e uma imagem do prato escolhido;
Adicionar os seguintes botões de paginação: 1, 2 e 3 (indicadores das páginas)
utilizando o framework bootstrap 5;
Adicionar a lógica necessária para realizar o funcionamento de troca de página;
Testar a aplicação desenvolvida.
INFRAESTRUTURA Programação para internet em front-end
Instalações:
Computador; Programação para Internet em Front-End
Software de ambiente de desenvolvimento para codificação HTML e JavaScript,
recomendavel VSCode.
Materiais de consumo:
Descrição
Quantidade de materiais por procedimento/atividade
Software:
Sim ( X ) Não ( )
Em caso afirmativo, qual?
Pago ( ) Não Pago ( X )
Tipo de Licença:
Descrição do software Programação para internet em front-end
O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para
Windows, Linux e macOS. Ele inclui suporte para depuração, controle de
versionamento Git incorporado, realce de sintaxe, complementação inteligente de
código, snippets e refatoração de código.
Equipamento de Proteção Individual (EPI):
– NSA
PROCEDIMENTOS PRÁTICOS AULA PRATICA
Atividade proposta: Programação para Internet em Front-End
Desenvolver um caderno de receitas online que contenha paginação, permitindo assim que o usuário
troque de página e visualize uma nova receita. Para realizar a formatação da paginação deve ser utilizado
bootstrap 5, HTML e CSS. A lógica para executar a troca de conteúdo (pagina) deve ser realizada
utilizando javascript. O Aluno pode escolher 3 receitas e criar uma “página” para cada receita. A
paginação deve conter um botão para cada página 1, 2 ou 3 respectivamente.
Procedimentos para a realização da atividade:
Para a realização desta aula pratica você deverá ter o software VSCODE instalado no seu computador.
Assista o vídeo tutorial da ferramenta aqui.
1. Crie uma pasta em algum local do seu computador com o nome “Exercício 1”.
2. Abra o VsCode, e escolha a opção “Open Folder”. Escolha a pasta que acabou de criar e abra o
projeto.
Crie a seguinte estrutura no seu projeto:
– assets
— css
— images
— js
– index.html
3. Crie uma estrutura básica HTML no arquivo index.html.
4. Adicione a referencia ao bootstrap dentro da tag <head> do seu documento HTML:
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>
5. Adicione uma div principal que contenha o conteúdo do caderno de receita e adicione a classe
“main”. Programação para Internet em Front-End
6. Adicione uma div para cada página contendo o título em h2 da receita, uma imagem e um texto
que pode ser uma lista (ul, ol) ou uma tag p e adicione a classe “item”.
7. Adicione um ul com a classe “pagination” do bootstrap logo abaixo a div principal.
8. Adicione um elemento li para cada botão, conforme a imagem:4
9. Escolha 3 imagens para suas receitas e adicione à pasta “images”;
10. Adicione um id “pag1”, “pag2”, “pag3” para cada div que contém uma página de receita;
11. Crie um arquivo “style.css” dentro da pasta “css”.
12. Adicione a referência de style.css na tag head do documento index.html:
<link href=”css/style.css” rel=”stylesheet”>
13. Adicione a classe “active” na div que contém a primeira receita do seu caderno de receitas.
14. Crie um arquivo “paginar.js” dentro da pasta “js”.
15. Adicione a referência de paginar.js na tag head do documento index.html:
<script src=”js/paginar.js”></script>
CSS:
1. Centralize a div principal “main”;
2. Adicione a propriedade disp
lay:none para todas as classes “item”;
3. Adicione a propriedade “display:block” para a o elemento que contém tanto a classe item quanto
active.
Javascript: Programação para Internet em Front-End
1. Crie a função “paginar” que receba um argumento: o id da div da página selecionada.
2. Crie a lógica para que a função “paginar” remova a classe active do elemento que contem ela
atualmente e adicione ao elemento passado como parâmetro a classe active.
3. Para cada botão <li class=”page-item”><a class=”page-link” href=”#” > (1, 2, 3) adicione o evento
onclick=”paginar(‘pagX’)”, onde X é o número da página que o elemento representa.
Fonte: elaborado pelo autor.5
Checklist:
Aquisição do software VsCode;
Criação da estrutura do projeto;
Criação do arquivo HTML;
Criação do arquivo CSS;
Criação do arquivo Javascript;
Codificação da pagina de receita (imagem, titulo, receita etc);
Codificação dos elementos de paginaçao;
Criação do algoritmo Javascript;
Associação da função Javascript aos botões de cada pagina através do evento de click do mouse.
RESULTADOS DO ROTEIRO AULA PRATICA Programação para internet em front-end
Resultados da aula prática: Um conjunto de pastas conforme descrito, contendo um arquivo de extensão
HTML que possua os elementos que cada página vai conter, arquivo com extensão CSS para formatar o
estilo da página e adicionar a classe necessária para esconder e mostrar cada página e um arquivo com
extensão JS capaz de realizar a lógica para o efeito de mostrar e esconder cada página.
