MEU PRIMEIRO LIVRO DE LEITURA
Conteúdo interativo para leitores
ALFABETIZAÇÃO • LEITURA INICIAL
Bem-vindo(a) ao conteúdo interativo do livro
Esta página foi criada para apoiar a leitura compartilhada. Aqui você pode ler frase por frase, ouvir a leitura (se o seu aparelho permitir) e fazer atividades.
Educação Infantil e 1º AnoLetras MaiúsculasAlinhado à BNCC
Dica: no celular, ative o modo tela cheia do navegador para uma leitura mais confortável.
<div class="nojs">
<strong>Se você estiver vendo “código” na tela:</strong>
o Blogger bloqueou os scripts. Publique este HTML fora do Blogger (Netlify/GitHub Pages) e incorpore por IFRAME.
</div>
</div>
<div class="card">
<div class="kicker">AUTOR</div>
<h2 style="margin-top:8px">Luís José Fracalossi</h2>
<p>Use esta página como complemento ao livro físico. Inclua um QR Code no livro apontando para o link desta página.</p>
<div class="card" style="background: rgba(15,23,42,.02); border-radius: 16px; padding: 14px; box-shadow:none;">
<div style="font-weight:900; margin-bottom:6px">QR Code</div>
<p class="small" style="margin:0">Espaço reservado. Quando publicar o site, gere um QR Code com o link e coloque na contracapa/folha inicial.</p>
</div>
<div class="btn-row">
<button class="good" onclick="toggleAcessibilidade()">Modo acessível</button>
<button onclick="toggleMaiusculas()">Alternar MAIÚSCULAS</button>
</div>
<p class="small" id="statusA11y" aria-live="polite"></p>
<div class="imgbox" style="margin-top:14px">
<div class="small" style="font-weight:900; margin-bottom:8px">Ilustrações reais</div>
<p class="small" style="margin:0">Para ativar, cole os links das imagens no bloco <span class="kbd">ILLUSTRATIONS</span> dentro do código.</p>
</div>
</div>
</div>
</div>
<section id="historias">
<div class="section-title">
<h2>Histórias (interativas)</h2>
<div class="small">Avance frase por frase, ouça e toque na ilustração para ampliar.</div>
</div>
<div class="grid" style="margin-top:12px">
<div class="card col-6" id="story1"></div>
<div class="card col-6" id="story2"></div>
<div class="card col-6" id="story3"></div>
<div class="card col-6" id="story4"></div>
</div>
</section>
<section id="atividades">
<div class="section-title">
<h2>Atividades rápidas (interativas)</h2>
<div class="small">Jogos curtos para reforçar palavras, sons e sentidos.</div>
</div>
<div class="grid" style="margin-top:12px">
<div class="card col-7">
<div class="story-head">
<div>
<div class="story-title">Atividade 1 — Classificar palavras</div>
<div class="small">Arraste (ou toque e mova) as palavras para a categoria certa.</div>
</div>
<span class="chip">Nível 1</span>
</div>
<div class="two-col" style="margin-top:10px">
<div>
<div class="small" style="font-weight:900; margin-bottom:6px">Palavras</div>
<div id="tags" aria-label="Palavras para arrastar"></div>
<div class="btn-row">
<button class="primary" onclick="resetDrag()">Reiniciar</button>
<button class="ghost" onclick="checkDrag()">Conferir</button>
</div>
<p class="small" id="dragResult" aria-live="polite"></p>
</div>
<div>
<div class="small" style="font-weight:900; margin-bottom:6px">Categorias</div>
<div class="small" style="margin-top:8px"><strong>ANIMAIS</strong></div>
<div class="dropzone" id="dz-animais" data-accept="SAPO,GATA,TATU,PATO" aria-label="Caixa Animais"></div>
<div class="small" style="margin-top:10px"><strong>OBJETOS</strong></div>
<div class="dropzone" id="dz-objetos" data-accept="BOLA,MALA,PIPA,POTE" aria-label="Caixa Objetos"></div>
<div class="small" style="margin-top:10px"><strong>AÇÕES</strong></div>
<div class="dropzone" id="dz-acoes" data-accept="PULA,RI,PROCURA,SOBE,TOMA,DORME" aria-label="Caixa Ações"></div>
</div>
</div>
<p class="small" style="margin-top:10px">
Dica ao adulto: fale a palavra em voz alta e peça para a criança dizer se é um animal, objeto ou ação.
</p>
</div>
<div class="card col-5">
<div class="story-head">
<div>
<div class="story-title">Atividade 2 — Som inicial</div>
<div class="small">Clique e escolha a letra que começa a palavra.</div>
</div>
<span class="chip">Nível 2</span>
</div>
<div style="margin-top:12px">
<div class="sentence" id="phonWord" style="text-transform:uppercase; font-size:22px">SAPO</div>
<div class="btn-row" id="phonChoices" aria-label="Alternativas"></div>
<p class="small" id="phonResult" aria-live="polite"></p>
<div class="btn-row">
<button class="primary" onclick="nextPhon()">Próxima palavra</button>
<button class="ghost" onclick="speak(document.getElementById('phonWord').textContent)">Ouvir palavra</button>
</div>
<p class="small">Dica ao adulto: destaque o primeiro som (ex.: “SSS” de SAPO).</p>
</div>
</div>
<div class="card col-12">
<div class="story-head">
<div>
<div class="story-title">Atividade 3 — Sequência (conversa)</div>
<div class="small">Use perguntas para recontar e organizar ideias.</div>
</div>
<span class="chip">Nível 3</span>
</div>
<div class="two-col" style="margin-top:10px">
<div class="card" style="box-shadow:none; background: rgba(15,23,42,.02)">
<div style="font-weight:900; margin-bottom:8px">Perguntas rápidas</div>
<ul style="margin:0; padding-left:18px; color:var(--muted); line-height:1.6">
<li>Quem aparece na história?</li>
<li>O que aconteceu primeiro?</li>
<li>Qual foi o problema?</li>
<li>Como o personagem se sentiu?</li>
<li>Como o problema foi resolvido?</li>
</ul>
</div>
<div class="card" style="box-shadow:none; background: rgba(15,23,42,.02)">
<div style="font-weight:900; margin-bottom:8px">Dica de mediação</div>
<p class="small" style="margin:0">
Valorize tentativas: “Você tentou!”, “Que legal!”, “Eu gostei de ver você lendo”.
Repita a leitura quantas vezes a criança quiser.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="diario">
<div class="section-title">
<h2>Meu diário de leitura</h2>
<div class="small">Marque o que foi lido hoje (fica salvo no aparelho).</div>
</div>
<div class="grid" style="margin-top:12px">
<div class="card col-7">
<div style="font-weight:900">Hoje eu li:</div>
<label style="display:block; margin-top:10px"><input type="checkbox" id="ck1" /> O SAPO E A BOLA</label>
<label style="display:block; margin-top:8px"><input type="checkbox" id="ck2" /> BALA NA MALA</label>
<label style="display:block; margin-top:8px"><input type="checkbox" id="ck3" /> A GATA MIMI E O POTE</label>
<label style="display:block; margin-top:8px"><input type="checkbox" id="ck4" /> O MENINO E A PIPA</label>
<div class="btn-row">
<button class="primary" onclick="saveDiary()">Salvar</button>
<button class="ghost" onclick="clearDiary()">Limpar</button>
</div>
<p class="small" id="diaryStatus" aria-live="polite"></p>
</div>
<div class="card col-5">
<div style="font-weight:900">A história que eu mais gostei foi:</div>
<select id="fav" style="margin-top:10px; width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(15,23,42,.16); font-weight:700">
<option value="">Selecione…</option>
<option>O SAPO E A BOLA</option>
<option>BALA NA MALA</option>
<option>A GATA MIMI E O POTE</option>
<option>O MENINO E A PIPA</option>
</select>
<div class="btn-row">
<button class="primary" onclick="saveFav()">Salvar</button>
</div>
<p class="small" id="favStatus" aria-live="polite"></p>
<div class="card" style="box-shadow:none; background: rgba(15,23,42,.02)">
<div style="font-weight:900; margin-bottom:6px">Desenho do personagem favorito</div>
<p class="small" style="margin:0">No digital, sugerimos desenhar no papel e contar o desenho para um adulto.</p>
</div>
</div>
</div>
</section>
<section id="guia">
<div class="section-title">
<h2>Guia do professor e da família</h2>
<div class="small">Orientações rápidas de uso.</div>
</div>
<div class="grid" style="margin-top:12px">
<div class="card col-12">
<div class="two-col">
<div>
<div style="font-weight:900">Como utilizar</div>
<ul style="margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.6">
<li>Leia junto com a criança e acompanhe o texto com o dedo.</li>
<li>Leia devagar, com entonação, e repita quantas vezes a criança quiser.</li>
<li>Convide a criança a completar palavras conhecidas.</li>
<li>Pergunte: “Quem é?”, “O que aconteceu?”, “Como se sentiu?”.</li>
</ul>
</div>
<div>
<div style="font-weight:900">Como saber se está avançando</div>
<ul style="margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.6">
<li>Reconhece palavras repetidas.</li>
<li>Aponta para o texto durante a leitura.</li>
<li>Antecipa frases e reconta a história com apoio.</li>
<li>Demonstra interesse pelo livro.</li>
</ul>
</div>
</div>
<div class="card" style="margin-top:12px; box-shadow:none; background: rgba(15,23,42,.02)">
<div style="font-weight:900">Mensagem final</div>
<p style="margin:8px 0 0">
A leitura não deve ser um momento de cobrança, mas um momento de afeto, conversa e descoberta.
Quando a criança se sente segura, ela aprende com mais facilidade.
</p>
</div>
</div>
</div>
</section>
Nenhum comentário:
Postar um comentário