Guia interativo em HTML5

em

A saga do guia em HTML5 começa 
v0.01


HTML 5 e Código base v0.01 Download

 O arquivo está no drive, tenho uma versão só para computador no entanto trarei quando a responsiva estiver completa, para começar a modificar é só instalar um editor html como o notepad++ 

Para rodar, ver basta baixar o arquivo no computador e abrir no navegador ou celular 

O i-frame foi crido usando h5p

Aperte nas estruturas na imagem


O que já tem


1- botões que permitem passar de uma pagina e outra
2- designe básico 
3- responsivo se adapta aos dispositivos
4- foi feito em um único arquivo Html, não é uma prática de codificação recomendada, mas o usuário não vai ter problema em baixar arquivos adicionais que acabem dando algum problema, funcionando como um livro, onde  so precisa apertar em um único arquivo

melhorias e modificações para o futuro

1- Ainda fazendo modificações no código dos iframe pra exibirem melhor o h5p
2- Buscando novas formas de hospedar os arquivos h5p pois a h5p org vai mudar o serviço de hospedagem, embed
3- Criar um sumario no inicio onde seja possível ir direto para o conteúdo desejado
4- Criar um sistema de progresso e "memoria" para o usuário voltar sempre de onde parou

5- Fazer um tutorial de uso para que qualquer leigo em programação possa criar o seu guia ilustrado em html5


📝 Como Adicionar Novas Páginas:

1. Adicionar o HTML da Nova Página

Copie e cole esta estrutura antes da tag </div> que fecha o container:

<!-- Página X: SEU TÍTULO AQUI -->
<div class="page">
    <div class="page-header">
        <h1>Título da Página</h1>
        <p>Subtítulo explicativo</p>
    </div>
    <div class="page-content">
        <div class="content-section">
            <div class="text-content">
                <div class="text-box">
                    <h3>Título da Seção</h3>
                    <p>Seu conteúdo aqui...</p>
                </div>
            </div>

            <div class="visual-content">
                <div class="image-container">
                    <img src="https://via.placeholder.com/400x300/COR/white?text=Sua+Imagem" alt="Descrição da imagem">
                </div>
            </div>
        </div>

        <!-- Opcional: Adicionar H5P -->
        <div class="iframe-container">
            <iframe src="about:blank" title="Conteúdo Interativo"></iframe>
            <div class="iframe-placeholder">
                <p><strong>Seu Conteúdo H5P</strong><br>
                Descrição do conteúdo interativo</p>
            </div>
        </div>

        <!-- Opcional: Caixa de destaque -->
        <div class="highlight-box">
            <h4>Curiosidade</h4>
            <p>Informação interessante relacionada ao tópico...</p>
        </div>
    </div>
</div>

2. Atualizar o Contador JavaScript

Encontre esta linha no JavaScript e mude o número:

const totalPages = 6; // Mude para o número total de páginas

3. Atualizar o Indicador de Página

<span class="page-indicator" id="pageIndicator">1 / 6</span>

🎨 Opções de Personalização:

Cores para Placeholders:

  • 4CAF50 (Verde)
  • 2196F3 (Azul)
  • E91E63 (Rosa)
  • 9C27B0 (Roxo)
  • FF9800 (Laranja)
  • F44336 (Vermelho)

Tipos de Layout:

  1. Texto + Imagem: Content-section com text-content e visual-content
  2. Só Texto: Apenas text-content
  3. Imagem Grande: Image-container sozinho
  4. H5P Destacado: Iframe-container em destaque

📋 Exemplo Prático:

Se você quiser adicionar uma página sobre "Genética":

<!-- Página 7: Genética -->
<div class="page">
    <div class="page-header">
        <h1>Genética</h1>
        <p>DNA e Hereditariedade</p>
    </div>
    <div class="page-content">
        <!-- Seu conteúdo aqui -->
    </div>
</div>

E atualize:

  • totalPages = 7
  • pageIndicator = "1 / 7"

Agora você pode adicionar quantas páginas quiser seguindo esse padrão! 🚀




Comentários

Postar um comentário