Construtor de Apresentações HTML Baseado na Web

Introdução

Neste projeto, você aprenderá como criar uma apresentação PowerPoint (PPT) baseada na web usando tecnologias front-end. Este tipo de PPT é mais conveniente para disseminação e visualização, e pode fazer pleno uso do layout e das capacidades de interação das tecnologias front-end.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como implementar a função switchPage para alternar entre as páginas do PPT
• Como lidar com a entrada do usuário, como pressionamentos de teclado e cliques de botões, para navegar pelas páginas do PPT
• Como implementar as funções goLeft e goRight para lidar com a navegação entre as páginas do PPT
• Como adicionar conteúdo aos slides do PPT para ensinar conhecimentos básicos de HTML

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma apresentação PowerPoint (PPT) baseada na web usando tecnologias front-end
• Manipular o DOM para exibir e ocultar páginas do PPT
• Lidar com a entrada do usuário e atualizar a interface do usuário (UI) de acordo
• Estruturar e apresentar conteúdo relacionado a HTML em um formato PPT

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── css
│   └── style.css
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

Onde:

• css/style.css é a folha de estilo (stylesheet).
• A pasta images contém os ícones usados na página.
• js/index.js é o arquivo JavaScript para a página.
• js/jquery-3.6.0.min.js é o arquivo jQuery.
• index.html é a página principal.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Função switchPage

Nesta etapa, você aprenderá como implementar a função switchPage para alternar entre as páginas do PPT.

1. Abra o arquivo js/index.js.
2. Localize a função switchPage e adicione o seguinte código:

function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

Explicação:

• $("section").eq(activeIndex).show().siblings().hide();: Esta linha mostra a página atual (section) e oculta todas as outras páginas.
• $(".btn.left").toggleClass("disable", activeIndex === 0);: Esta linha adiciona a classe disable ao botão "Anterior" quando o usuário está na primeira página e remove a classe quando o usuário está em qualquer outra página.
• $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);: Esta linha adiciona a classe disable ao botão "Próximo" quando o usuário está na última página e remove a classe quando o usuário está em qualquer outra página.
• $(".page").text(${activeIndex + 1} / ${sectionsCount});: Esta linha atualiza a exibição do número da página no canto inferior esquerdo da página.

3. Salve o arquivo js/index.js.

Agora, a função switchPage está implementada, e a funcionalidade de troca de página deve funcionar como esperado.

Gerenciar a Entrada do Usuário

Nesta etapa, você aprenderá como lidar com a entrada do usuário, como pressionamentos de teclas e cliques de botões, para navegar pelas páginas do PPT.

1. Abra o arquivo js/index.js.
2. Localize o código do ouvinte de eventos e adicione o seguinte código:

// Listening for user presses of the space and arrow keys
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Listening to button click events
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

Explicação:

• O primeiro ouvinte de eventos escuta os eventos keydown no documento. Quando o usuário pressiona a barra de espaço ou a tecla de seta para a direita, a função goRight() é chamada. Quando o usuário pressiona a tecla de seta para a esquerda, a função goLeft() é chamada.
• O segundo conjunto de ouvintes de eventos escuta os eventos de clique nos botões "Anterior" e "Próximo". Quando o usuário clica no botão "Anterior", a função goLeft() é chamada. Quando o usuário clica no botão "Próximo", a função goRight() é chamada.

3. Salve o arquivo js/index.js.

Agora, o tratamento da entrada do usuário está implementado, e o usuário pode navegar pelas páginas do PPT usando o teclado ou os botões.

Implementar as Funções goLeft e goRight

Nesta etapa, você aprenderá como implementar as funções goLeft e goRight para lidar com a navegação entre as páginas do PPT.

1. Abra o arquivo js/index.js.
2. Localize as funções goLeft e goRight e adicione o seguinte código:

// Functions for switching to the next sheet
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Functions for switching the previous sheet
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

Explicação:

• A função goLeft verifica se o usuário está na primeira página. Se estiver, ela retorna sem fazer nada. Caso contrário, ela decrementa a variável activeIndex e chama a função switchPage para atualizar a exibição.
• A função goRight verifica se o usuário está na última página. Se estiver, ela retorna sem fazer nada. Caso contrário, ela incrementa a variável activeIndex e chama a função switchPage para atualizar a exibição.

3. Salve o arquivo js/index.js.

Agora, as funções goLeft e goRight estão implementadas, e o usuário pode navegar pelas páginas do PPT usando o teclado ou os botões.

O efeito final da página deve ser o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.