Aula Prática Programação para internet em front-end

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 Instalações: Computador; 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: 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 3 Atividade proposta: 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 tagdo seu documento HTML: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js5. Adicione uma div principal que contenha o conteúdo do caderno de receita e adicione a classe “main”. 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: 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:http://js/paginar.jsCSS: 1. Centralize a div principal “main”; 2. Adicione a propriedade display: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: 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

(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 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.