Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Programação para Internet em Front-End

    Enviado por

    Igor Baroni
    10 visualizações7 páginas

    Título original

    Programação Para Internet em Front-end

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações7 páginas

    Programação para Internet em Front-End

    Enviado por

    Igor Baroni

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 7

    Faculdade Pitágoras

    Sistema de Informação

    IGOR BARONI FERREIRA

    Relatório de Aula Prática – Programação Para Internet em Front-end

    Desenvolver uma interface front-end simples em HTML e CSS contendo


    algum texto informativo (receita) e uma imagem do prato escolhido

    IGOR BARONI FERREIRA

    1
    Relatório de Aula Prática – Programação Para Internet em Front-end:

    Desenvolver uma interface front-end simples em HTML e CSS contendo


    algum texto informativo (receita) e uma imagem do prato escolhido

    Programação Para Internet em Front-end


    apresentado como requisito parcial para a obtenção
    de média bimestral na disciplina de Programação
    Para Internet em Front-end, em Bacharel em
    Sistema de Informação.

    Orientadora: Prof. Leonardo Santiago Sidon da


    Rocha

    Belo Horizonte
    2023

    2
    Sumário

    1. INTRODUÇÃO .................................................. Erro! Nenhum nome foi dado ao indicador.


    2. DESENVOLVIMENTO ........................................ Erro! Nenhum nome foi dado ao indicador.
    3. Métodos: ......................................................................................................................... 6
    4. Resultados: ...................................................................................................................... 7
    5. Conclusão: ....................................................................................................................... 7

    3
    1. INTRODUÇÃO

    O projeto "Caderno de Receitas" é um aplicativo web simples


    que permite que o usuário crie um caderno de receitas com várias páginas. Cada
    página contém o título da receita, uma imagem e uma lista de ingredientes e
    instruções. O aplicativo usa HTML, CSS e JavaScript para criar as páginas e
    permitir que o usuário as navegue.

    2. DESENVOLVIMENTO

    4
    Link para acessar o trabalho: Link

    5
    3. Métodos:

    Procedimentos:

    Os seguintes procedimentos foram realizados para desenvolver o projeto "Caderno de


    Receitas":

    ● Criação da estrutura básica HTML: O primeiro passo foi criar a estrutura básica
    do HTML, que inclui uma tag <head> para adicionar referências ao CSS e
    JavaScript e uma tag <body> para adicionar o conteúdo da página.

    ● Adição da referência ao Bootstrap: O aplicativo usa o Bootstrap para adicionar


    estilos e elementos de navegação. A referência ao Bootstrap foi adicionada à
    tag <head>.

    ● Adição da div principal: Uma div principal com a classe "main" foi adicionada
    para conter o conteúdo do caderno de receitas.

    ● Adição das divs das páginas: 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) foi adicionada com a classe "item".

    ● Adição da paginação: Um ul com a classe "pagination" do Bootstrap foi


    adicionado logo abaixo da div principal. Um elemento li foi adicionado para
    cada botão, conforme a imagem.

    ● Adição das imagens: Três imagens foram escolhidas para as receitas e


    adicionadas à pasta "images".

    ● Adição dos IDs das divs: Um ID "pag1", "pag2" e "pag3" foi adicionado a cada
    div que contém uma página de receita.

    ● Criação do arquivo "style.css": Um arquivo "style.css" foi criado dentro da pasta


    "css" e adicionado à tag <head> do documento index.html.

    ● Estilização da página: A página foi estilizada com CSS para centralizar a div
    principal, ocultar todas as classes "item" e exibir o elemento que contém tanto
    a classe "item" quanto "active".

    ● Criação do arquivo "paginar.js": Um arquivo "paginar.js" foi criado dentro da


    pasta "js" e adicionado à tag <head> do documento index.html.

    ● Adição da classe "active": A classe "active" foi adicionada à div que contém a
    primeira receita do caderno de receitas.

    6
    ● Criação da função "paginar": A função "paginar" foi criada para receber o ID da
    div da página selecionada e alterar a classe "active" para o elemento
    selecionado.

    ● Adição do evento "onclick": O evento "onclick" foi adicionado a cada botão da


    paginação para chamar a função "paginar" e selecionar a página
    correspondente.

    4. Resultados:

    O projeto "Caderno de Receitas" foi concluído com sucesso e agora permite que o
    usuário crie um caderno de receitas com várias páginas e navegue entre elas usando
    a paginação. A estrutura HTML, o estilo CSS e o código JavaScript foram criados e
    organizados de forma a permitir fácil manutenção e expansão do aplicativo.

    5. Conclusão:

    Em conclusão, este projeto consistiu em criar um caderno de receitas em HTML, CSS


    e JavaScript utilizando a biblioteca Bootstrap. O objetivo principal era criar uma
    aplicação que permitisse navegar entre diferentes páginas de receitas por meio de um
    menu de paginação.

    Para atingir esse objetivo, seguimos uma série de passos, como a criação da estrutura
    básica em HTML, a adição do Bootstrap, a criação das divs principais para cada
    página de receita e a adição de imagens e texto correspondentes. Também foi
    adicionado um arquivo CSS para estilização e um arquivo JavaScript para a lógica de
    paginação.

    No entanto, houve algumas dificuldades durante o processo, como a necessidade de


    ajustar a lógica de paginação para que ela funcionasse corretamente em todos os
    navegadores. Felizmente, com algumas mudanças no código JavaScript, foi possível
    resolver esses problemas.

    No final, o resultado foi um caderno de receitas funcional e esteticamente agradável,


    com um menu de paginação responsivo que permitiu aos usuários navegar facilmente
    entre as diferentes páginas de receitas. Este projeto nos permitiu praticar nossas
    habilidades em HTML, CSS e JavaScript, bem como aprender como utilizar a
    biblioteca Bootstrap para criar uma aplicação responsiva e elegante.

    Você também pode gostar