Apresentação da disciplina
Apresentação da disciplina de formação de professores.html
—
HTML,
17 kB (17439 bytes)
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apresentação: Formação de Professores e Trabalho Docente</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
overflow: hidden;
}
.slide {
transition: opacity 0.6s ease-in-out;
}
.slide-content {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hidden {
display: none;
}
.card-hover {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body class="bg-gray-100 text-gray-800 flex items-center justify-center h-screen m-0 p-0">
<div id="presentation-container" class="relative w-full h-full">
<!-- Slide 1: Título -->
<div class="slide w-full h-full flex items-center justify-center p-8 bg-white">
<div class="text-center slide-content">
<img src="https://professorcarlosjunior.com.br/wp-content/uploads/2025/07/cropped-logo-png-1.png" alt="Logomarca Professor Carlos Júnior" class="mx-auto mb-6 h-24 w-auto">
<div class="bg-indigo-50 p-8 rounded-2xl shadow-sm card-hover">
<h1 class="text-5xl md:text-6xl font-black tracking-tight text-indigo-900 mb-4">Formação de Professores e Trabalho Docente</h1>
<p class="text-2xl text-indigo-700">Licenciatura em Química - IFRN Ipanguaçu</p>
</div>
<p class="mt-6 text-xl text-gray-600">Professor Carlos Júnior</p>
</div>
</div>
<!-- Slide 2: Por que esta disciplina? -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-gray-50">
<div class="max-w-5xl mx-auto slide-content grid md:grid-cols-2 gap-12 items-center">
<div class="bg-white p-8 rounded-lg shadow-md card-hover">
<h2 class="text-4xl font-bold text-indigo-800 mb-6">Por que esta disciplina?</h2>
<p class="text-xl text-gray-700 leading-relaxed">Ser professor de Química vai muito além de dominar fórmulas e reações.</p>
<p class="text-xl text-gray-700 mt-4 leading-relaxed">Vamos investigar a fundo o que significa <strong class="text-indigo-900">ser docente</strong> hoje: os desafios, os saberes e o nosso papel na transformação da educação.</p>
</div>
<div class="flex justify-center items-center">
<img src="https://cdn.pixabay.com/photo/2021/10/25/09/13/science-6740278_1280.png" alt="Ilustração de um professor de ciências com elementos de química" class="h-64 w-auto object-contain">
</div>
</div>
</div>
<!-- Slide 3: O que vamos explorar? -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-indigo-50">
<div class="text-center max-w-6xl mx-auto slide-content">
<h2 class="text-4xl font-bold text-indigo-800 mb-12">O que vamos explorar?</h2>
<div class="grid md:grid-cols-3 gap-8 text-left">
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-4xl mb-3">🧑🏫</h3>
<h4 class="text-xl font-bold text-gray-800">Identidade e Saberes</h4>
<p class="text-gray-600 mt-2">A construção do ser professor. Quais conhecimentos são essenciais para a docência em Química?</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-4xl mb-3">🏛️</h3>
<h4 class="text-xl font-bold text-gray-800">Políticas e Reformas</h4>
<p class="text-gray-600 mt-2">Como as leis e reformas educacionais impactam nosso trabalho em sala de aula e no laboratório?</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card-hover">
<h3 class="text-4xl mb-3">🚀</h3>
<h4 class="text-xl font-bold text-gray-800">Desenvolvimento Profissional</h4>
<p class="text-gray-600 mt-2">Formação inicial, continuada e a busca por uma prática reflexiva e inovadora no ensino de Química.</p>
</div>
</div>
</div>
</div>
<!-- Slide 4: Nossa Jornada -->
<div class="slide hidden w-full h-full flex flex-col items-center justify-center p-8 bg-gray-50">
<div class="text-center slide-content max-w-5xl">
<h2 class="text-4xl font-bold text-indigo-800 mb-10">Nossa Jornada Acadêmica</h2>
<div class="bg-white p-8 rounded-lg shadow-lg grid md:grid-cols-2 gap-8 items-center card-hover">
<div class="text-left space-y-4">
<div class="flex items-start"><span class="text-indigo-500 mr-3 text-3xl font-bold">🧪</span><p class="text-xl font-bold text-gray-700">80 horas/aula (60h)</p></div>
<div class="flex items-start"><span class="text-indigo-500 mr-3 text-3xl font-bold">📚</span> <p class="text-xl font-bold text-gray-700">04 Créditos</p></div>
<div class="flex items-start"><span class="text-indigo-500 mr-3 text-3xl font-bold">💡</span><p class="text-xl font-bold text-gray-700">Encontros dinâmicos e participativos</p></div>
</div>
<div class="flex justify-center items-center">
<svg class="w-full max-w-xs h-auto" viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg">
<path d="M10 70 Q 50 10, 90 70" stroke="#C7D2FE" stroke-dasharray="4" stroke-width="2" fill="none"/>
<path d="M8 70 l5-5 -5-5" fill="none" stroke="#A5B4FC" stroke-width="2"/>
<text x="15" y="55" font-size="12">🧪</text>
<text x="80" y="55" font-size="12">🎓</text>
<text x="45" y="30" font-size="12">📚</text>
</svg>
</div>
</div>
</div>
</div>
<!-- Slide 5: Como Vamos Aprender? -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-indigo-50">
<div class="text-center max-w-5xl mx-auto slide-content">
<h2 class="text-4xl font-bold text-indigo-800 mb-6">Como Vamos Aprender?</h2>
<p class="text-xl text-gray-600 mb-10 max-w-3xl mx-auto">A metodologia será ativa, conectando a teoria com a prática futura de vocês como professores de Química.</p>
<div class="grid md:grid-cols-3 gap-8 text-center">
<div class="bg-white p-6 rounded-lg shadow-md card-hover"><h3 class="text-2xl font-bold text-indigo-700 mb-2">🗣️</h3><h4 class="text-lg font-bold text-gray-800 mb-2">Debates e Diálogos</h4><p class="text-gray-600">Análise crítica de textos e políticas educacionais.</p></div>
<div class="bg-white p-6 rounded-lg shadow-md card-hover"><h3 class="text-2xl font-bold text-indigo-700 mb-2">🔬</h3><h4 class="text-lg font-bold text-gray-800 mb-2">Estudos de Caso</h4><p class="text-gray-600">Discussão de situações reais da sala de aula de Química.</p></div>
<div class="bg-white p-6 rounded-lg shadow-md card-hover"><h3 class="text-2xl font-bold text-indigo-700 mb-2">🧩</h3><h4 class="text-lg font-bold text-gray-800 mb-2">Construção de Projetos</h4><p class="text-gray-600">Elaboração de propostas didáticas que integrem os saberes docentes.</p></div>
</div>
</div>
</div>
<!-- Slide 6: Ementa -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-gray-50">
<div class="max-w-4xl mx-auto slide-content text-left">
<h2 class="text-4xl font-bold text-indigo-800 mb-8 text-center">Ementa da Disciplina</h2>
<div class="bg-white p-8 rounded-lg shadow-lg card-hover">
<ul class="space-y-3 text-gray-700 text-lg">
<li class="flex items-start"><span class="text-indigo-500 mr-3 mt-1">▶</span> A natureza da docência e o processo histórico dos saberes docentes.</li>
<li class="flex items-start"><span class="text-indigo-500 mr-3 mt-1">▶</span> Novas demandas educacionais face às mudanças no mundo do trabalho.</li>
<li class="flex items-start"><span class="text-indigo-500 mr-3 mt-1">▶</span> Reformas educacionais e o reordenamento do trabalho docente no século XXI.</li>
<li class="flex items-start"><span class="text-indigo-500 mr-3 mt-1">▶</span> Reflexão sobre a formação inicial e continuada e as dimensões do trabalho docente.</li>
<li class="flex items-start"><span class="text-indigo-500 mr-3 mt-1">▶</span> O desenvolvimento do professor reflexivo: Profissionalismo, profissionalidade e profissionalização.</li>
</ul>
</div>
</div>
</div>
<!-- Slide 7: Objetivos -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-indigo-50">
<div class="max-w-4xl mx-auto slide-content text-left">
<h2 class="text-4xl font-bold text-indigo-800 mb-8 text-center">Objetivos de Aprendizagem</h2>
<div class="bg-white p-8 rounded-lg shadow-lg card-hover">
<ul class="space-y-3 text-gray-700 text-lg">
<li class="flex items-start"><span class="text-green-500 font-bold mr-3">✔</span> Identificar o processo histórico e a natureza dos saberes docentes.</li>
<li class="flex items-start"><span class="text-green-500 font-bold mr-3">✔</span> Compreender as novas demandas educacionais e a natureza da docência.</li>
<li class="flex items-start"><span class="text-green-500 font-bold mr-3">✔</span> Caracterizar o que permeia a docência e suas condições de trabalho.</li>
<li class="flex items-start"><span class="text-green-500 font-bold mr-3">✔</span> Analisar as reformas educacionais e sua repercussão no trabalho docente.</li>
<li class="flex items-start"><span class="text-green-500 font-bold mr-3">✔</span> Compreender e identificar as recentes políticas e programas de formação de professores.</li>
</ul>
</div>
</div>
</div>
<!-- Slide 8: Conteúdo Programático -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-gray-50">
<div class="max-w-5xl mx-auto slide-content text-left">
<h2 class="text-4xl font-bold text-indigo-800 mb-8 text-center">Conteúdo Programático</h2>
<div class="bg-white p-8 rounded-lg shadow-lg card-hover">
<ol class="list-decimal list-inside space-y-2 text-gray-700 grid md:grid-cols-2 gap-x-8 text-lg">
<li>Docência como Profissão</li><li>Modelos de Formação</li><li>Espaços de Formação</li><li>Natureza do Trabalho Docente</li><li>Condições de Trabalho</li><li>Profissionalismo</li><li>Reformas Educacionais</li><li>Políticas de Formação no Brasil</li><li>Programas de Formação</li><li>Políticas de Carreira Docente</li>
</ol>
</div>
</div>
</div>
<!-- Slide 9: Bibliografia -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-indigo-50">
<div class="max-w-4xl mx-auto slide-content text-left">
<h2 class="text-4xl font-bold text-indigo-800 mb-8 text-center">Referências Bibliográficas</h2>
<div class="bg-white p-8 rounded-lg shadow-lg space-y-4 card-hover">
<div><p class="font-bold text-gray-800">Pedagogia da Autonomia: Saberes Necessários à Prática Educativa</p><p class="text-gray-600">Autor: Paulo Freire</p></div><hr>
<div><p class="font-bold text-gray-800">Dez Novas Competências para Ensinar</p><p class="text-gray-600">Autor: Philippe Perrenoud</p></div><hr>
<div><p class="font-bold text-gray-800">Saberes Docentes e Formação Profissional</p><p class="text-gray-600">Autor: Maurice Tardif</p></div><hr>
<div><p class="font-bold text-gray-800">Professores de Carne e Osso: Para uma Escola Humana</p><p class="text-gray-600">Autor: António Nóvoa</p></div><hr>
<div><p class="font-bold text-gray-800">Saberes Pedagógicos e Atividade Docente</p><p class="text-gray-600">Autora: Selma Garrido Pimenta</p></div>
</div>
</div>
</div>
<!-- Slide 10: Vamos Começar? -->
<div class="slide hidden w-full h-full flex items-center justify-center p-8 bg-white">
<div class="text-center slide-content">
<img src="https://professorcarlosjunior.com.br/wp-content/uploads/2025/07/Carlos-junior-Laboratorio-1536x1140.jpg" alt="Foto do Professor Carlos Júnior em um laboratório" class="mx-auto mb-6 h-56 w-56 rounded-2xl object-cover shadow-xl">
<div class="bg-gray-100 p-8 rounded-xl card-hover">
<h2 class="text-5xl font-black text-indigo-900 mb-4">Prontos para a reação?</h2>
<p class="text-2xl text-indigo-700 mb-8">Vamos juntos catalisar nossa formação docente!</p>
</div>
<p class="mt-8 text-lg text-gray-500">Dúvidas? Comentários? A conversa começa agora.</p>
</div>
</div>
<!-- Navegação -->
<div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-4">
<button id="prevBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition-colors disabled:bg-indigo-300 disabled:cursor-not-allowed">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
</button>
<button id="nextBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
</button>
</div>
<!-- Contador de Slides -->
<div id="slide-counter" class="absolute bottom-5 right-5 text-gray-600 text-sm bg-white bg-opacity-70 px-3 py-1 rounded-full">1 / 10</div>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const slideCounter = document.getElementById('slide-counter');
let currentSlide = 0;
const totalSlides = slides.length;
function showSlide(slideIndex) {
slides.forEach((slide) => slide.classList.add('hidden'));
if (slides[slideIndex]) slides[slideIndex].classList.remove('hidden');
slideCounter.textContent = `${slideIndex + 1} / ${totalSlides}`;
prevBtn.disabled = slideIndex === 0;
nextBtn.disabled = slideIndex === totalSlides - 1;
}
nextBtn.addEventListener('click', () => {
if (currentSlide < totalSlides - 1) showSlide(++currentSlide);
});
prevBtn.addEventListener('click', () => {
if (currentSlide > 0) showSlide(--currentSlide);
});
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') nextBtn.click();
else if (event.key === 'ArrowLeft') prevBtn.click();
});
showSlide(currentSlide);
</script>
</body>
</html>
