Roteiro Aula Pratica 2 - Criacao de Caderno de Receitas Online com HTML, CSS e Bootstrap

PROGRAMAÇÃO PARA INTERNET EM FRONTEND Roteiro Aula Prática 2 ROTEIRO DE AULA PRÁTICA NOME DA DISCIPLINA Programação para internet em frontend OBJETIVOS Definição dos objetivos da aula prática Desenvolver uma interface frontend 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 procedimentoatividade 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ódigofonte 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 indexhtml 3 Crie uma estrutura básica HTML no arquivo indexhtml 4 Adicione a referencia ao bootstrap dentro da tag head do seu documento HTML link hrefhttpscdnjsdelivrnetnpmbootstrap513distcssbootstrapmincss relstylesheet script srchttpscdnjsdelivrnetnpmbootstrap513distjsbootstrapbundleminjsscript 5 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 stylecss dentro da pasta css 12 Adicione a referência de stylecss na tag head do documento indexhtml link hrefcssstylecss relstylesheet 13 Adicione a classe active na div que contém a primeira receita do seu caderno de receitas 14 Crie um arquivo paginarjs dentro da pasta js 15 Adicione a referência de paginarjs na tag head do documento indexhtml script srcjspaginarjsscript CSS 1 Centralize a div principal main 2 Adicione a propriedade displaynone para todas as classes item 3 Adicione a propriedade displayblock 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 li classpageitema classpagelink href 1 2 3 adicione o evento onclickpaginarpagX 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