| | <!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 Acadêmica - IA e Engenharia</title> |
| | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| | <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| |
|
| | <style> |
| | :root { |
| | --primary: #1e3a8a; |
| | --secondary: #3b82f6; |
| | --accent: #f59e0b; |
| | --text: #1f2937; |
| | --text-light: #6b7280; |
| | --bg: #f3f4f6; |
| | --white: #ffffff; |
| | } |
| | |
| | * { margin: 0; padding: 0; box-sizing: border-box; } |
| | |
| | body { |
| | font-family: 'Roboto', sans-serif; |
| | background-color: #111; |
| | height: 100vh; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | color: var(--text); |
| | } |
| | |
| | .container { |
| | width: 100%; |
| | max-width: 1280px; |
| | aspect-ratio: 16/9; |
| | background: var(--white); |
| | position: relative; |
| | overflow: hidden; |
| | border-radius: 8px; |
| | box-shadow: 0 0 50px rgba(0,0,0,0.5); |
| | } |
| | |
| | |
| | .slide { |
| | position: absolute; |
| | inset: 0; |
| | padding: 3rem 5rem; |
| | opacity: 0; |
| | transform: translateX(20px); |
| | transition: opacity 0.4s ease, transform 0.4s ease; |
| | pointer-events: none; |
| | display: flex; |
| | flex-direction: column; |
| | justify-content: center; |
| | background: white; |
| | z-index: 1; |
| | } |
| | |
| | .slide.active { |
| | opacity: 1; |
| | transform: translateX(0); |
| | pointer-events: auto; |
| | z-index: 2; |
| | } |
| | |
| | |
| | .header { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | height: 8px; |
| | background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); |
| | z-index: 5; |
| | } |
| | |
| | .slide-number { |
| | position: absolute; |
| | bottom: 2rem; |
| | left: 3rem; |
| | font-size: 1.5rem; |
| | font-weight: 900; |
| | color: #e5e7eb; |
| | z-index: 5; |
| | } |
| | |
| | |
| | h1 { font-size: 3rem; font-weight: 900; color: var(--primary); line-height: 1.2; margin-bottom: 1rem; } |
| | h2 { font-size: 2.2rem; color: var(--text); font-weight: 700; margin-bottom: 2rem; border-left: 8px solid var(--secondary); padding-left: 1.5rem; } |
| | h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--primary); } |
| | p { font-size: 1.15rem; line-height: 1.6; color: var(--text-light); margin-bottom: 1rem; } |
| | |
| | |
| | .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; height: 100%; } |
| | .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-top: 2rem; } |
| | |
| | |
| | .stat-card { |
| | background: #f9fafb; |
| | padding: 1.5rem; |
| | border-radius: 8px; |
| | border-top: 4px solid var(--secondary); |
| | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| | } |
| | .big-number { |
| | font-size: 3.5rem; |
| | font-weight: 900; |
| | color: var(--primary); |
| | display: block; |
| | margin-bottom: 0.5rem; |
| | } |
| | .stat-label { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); } |
| | |
| | .comparison-table { |
| | width: 100%; |
| | border-collapse: collapse; |
| | margin-top: 1rem; |
| | } |
| | .comparison-table th { text-align: left; padding: 1rem; border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: 900; } |
| | .comparison-table td { padding: 1rem; border-bottom: 1px solid #e5e7eb; font-size: 1.1rem; } |
| | .comparison-table tr:last-child td { border-bottom: none; } |
| | |
| | |
| | .bar-row { display: flex; align-items: center; margin-bottom: 1rem; } |
| | .bar-title { width: 150px; font-weight: 600; font-size: 0.9rem; } |
| | .bar-track { flex: 1; height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden; } |
| | .bar-value { height: 100%; background: var(--secondary); } |
| | |
| | |
| | .controls { |
| | position: absolute; |
| | bottom: 30px; |
| | right: 30px; |
| | display: flex; |
| | gap: 15px; |
| | z-index: 9999; |
| | background: rgba(255, 255, 255, 0.9); |
| | padding: 5px; |
| | border-radius: 50px; |
| | box-shadow: 0 4px 15px rgba(0,0,0,0.1); |
| | } |
| | .btn-nav { |
| | width: 50px; height: 50px; |
| | border: none; |
| | background: var(--primary); |
| | border-radius: 50%; |
| | cursor: pointer; |
| | color: white; |
| | font-size: 1.2rem; |
| | transition: all 0.2s; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| | .btn-nav:hover { background: var(--secondary); transform: scale(1.1); } |
| | .btn-nav:active { transform: scale(0.95); } |
| | |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <div class="container"> |
| | <div class="header"></div> |
| |
|
| | <div class="slide active"> |
| | <div style="max-width: 900px;"> |
| | <p style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: var(--secondary); margin-bottom: 1rem;"> |
| | Congresso Internacional de Jovens Pesquisadores |
| | </p> |
| | <h1>O Impacto da Inteligência Artificial na Formação do Engenheiro de Sistemas</h1> |
| | <p style="font-size: 1.5rem; color: var(--text); margin-top: 1.5rem; border-left: 5px solid var(--accent); padding-left: 1.5rem;"> |
| | Análise sobre adaptação curricular, novas competências e o futuro do mercado de trabalho. |
| | </p> |
| | <div style="margin-top: 3rem; display: flex; align-items: center; gap: 2rem;"> |
| | <div> |
| | <h3 style="margin:0; color: var(--text);">Jairo Mendoza</h3> |
| | <p style="margin:0; font-size: 1rem; color: var(--text-light);">Estudante de Engenharia de Sistemas (UNTELS)</p> |
| | </div> |
| | <div style="height: 40px; width: 2px; background: #d1d5db;"></div> |
| | <div> |
| | <p style="margin:0; font-size: 1rem; font-weight: bold; color: var(--text-light);">Brasil, 2025</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="slide-number">01</div> |
| | </div> |
| |
|
| | <div class="slide"> |
| | <h2>1. Apresentação e Contexto</h2> |
| | <div class="grid-2"> |
| | <div> |
| | <p><strong>Quem sou eu:</strong> Estudante do 10º ciclo com foco em tecnologias emergentes e visão computacional.</p> |
| | <p>Esta apresentação nasce da necessidade de entender a rápida obsolescência do currículo tradicional frente aos modelos generativos (LLMs).</p> |
| | |
| | <h3 style="margin-top: 2rem;">Pilares da Pesquisa:</h3> |
| | <ul style="list-style: none; margin-top: 1rem;"> |
| | <li style="margin-bottom: 15px; font-size: 1.2rem;"><i class="fa-solid fa-check-circle" style="color:var(--secondary); margin-right: 10px;"></i> Automação Inteligente de Processos.</li> |
| | <li style="margin-bottom: 15px; font-size: 1.2rem;"><i class="fa-solid fa-check-circle" style="color:var(--secondary); margin-right: 10px;"></i> Integração de IA em Sistemas.</li> |
| | <li style="margin-bottom: 15px; font-size: 1.2rem;"><i class="fa-solid fa-check-circle" style="color:var(--secondary); margin-right: 10px;"></i> Ética e Viés Algorítmico.</li> |
| | </ul> |
| | </div> |
| | <div class="stat-card" style="background: white; border: 1px solid #e5e7eb;"> |
| | <h3 style="text-align: center; margin-bottom: 1.5rem; font-size: 1.1rem;">MOTIVAÇÃO</h3> |
| | <div style="text-align: center;"> |
| | <i class="fa-solid fa-graduation-cap" style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;"></i> |
| | <p style="font-size: 1.1rem;">"Como migrar de um perfil <strong>Operacional</strong> para um perfil <strong>Estratégico</strong>?"</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="slide-number">02</div> |
| | </div> |
| |
|
| | <div class="slide"> |
| | <h2>2. Desafios: A "Meia-Vida" da Habilidade</h2> |
| | <p>O principal desafio não é apenas técnico, é a velocidade de adaptação.</p> |
| | |
| | <div class="grid-3"> |
| | <div class="stat-card"> |
| | <span class="big-number">2.5</span> |
| | <span class="stat-label">Anos</span> |
| | <p style="font-size: 1rem; margin-top: 10px;">Vida útil média de uma habilidade técnica hoje.</p> |
| | </div> |
| | <div class="stat-card"> |
| | <span class="big-number">65%</span> |
| | <span class="stat-label">Automação</span> |
| | <p style="font-size: 1rem; margin-top: 10px;">Das tarefas de codificação rotineira podem ser assistidas por IA.</p> |
| | </div> |
| | <div class="stat-card"> |
| | <span class="big-number">Soft</span> |
| | <span class="stat-label">Prioridade</span> |
| | <p style="font-size: 1rem; margin-top: 10px;">Pensamento crítico torna-se o diferencial.</p> |
| | </div> |
| | </div> |
| | <p style="font-size: 0.9rem; text-align: right; margin-top: 3rem;">*Dados baseados em tendências de mercado (Gartner/IEEE).</p> |
| | <div class="slide-number">03</div> |
| | </div> |
| |
|
| | <div class="slide"> |
| | <h2>3. Oportunidades: Evolução do Papel</h2> |
| | <p>A IA não substitui o engenheiro, ela eleva o nível de abstração do problema.</p> |
| | |
| | <div style="background: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; margin-top: 1rem;"> |
| | <table class="comparison-table"> |
| | <thead> |
| | <tr style="background: #f3f4f6;"> |
| | <th style="width: 45%;">Engenharia Tradicional</th> |
| | <th style="width: 10%; text-align: center;"><i class="fa-solid fa-arrow-right"></i></th> |
| | <th style="width: 45%;">Engenharia Aumentada por IA</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | <tr> |
| | <td>Escrita de código manual (Sintaxe).</td> |
| | <td style="text-align: center; color: var(--secondary);">→</td> |
| | <td><strong>Arquitetura</strong> e revisão de código.</td> |
| | </tr> |
| | <tr> |
| | <td>Resolução reativa de bugs.</td> |
| | <td style="text-align: center; color: var(--secondary);">→</td> |
| | <td><strong>Manutenção preditiva</strong>.</td> |
| | </tr> |
| | <tr> |
| | <td>Especialista em uma linguagem.</td> |
| | <td style="text-align: center; color: var(--secondary);">→</td> |
| | <td><strong>Poliglota tecnológico</strong>.</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | <div class="slide-number">04</div> |
| | </div> |
| |
|
| | <div class="slide"> |
| | <h2>4. Reflexão Ética: Human-in-the-Loop</h2> |
| | <div class="grid-2"> |
| | <div> |
| | <p style="font-size: 1.4rem; font-weight: 300; color: var(--text); font-style: italic;"> |
| | "A eficiência algorítmica não pode superar a responsabilidade social." |
| | </p> |
| | <div style="margin-top: 3rem;"> |
| | <div class="bar-row"> |
| | <div class="bar-title">Capacidade Técnica</div> |
| | <div class="bar-track"><div class="bar-value" style="width: 90%;"></div></div> |
| | </div> |
| | <div class="bar-row"> |
| | <div class="bar-title">Julgamento Ético</div> |
| | <div class="bar-track"><div class="bar-value" style="width: 100%; background: var(--primary);"></div></div> |
| | </div> |
| | </div> |
| | <p style="margin-top: 1.5rem;">O engenheiro deve ser o guardião da ética, auditando os sistemas para evitar viéses.</p> |
| | </div> |
| | <div style="display: flex; justify-content: center;"> |
| | <div style="width: 250px; height: 250px; border-radius: 50%; border: 15px solid #e5e7eb; border-top: 15px solid var(--accent); display: flex; align-items: center; justify-content: center; flex-direction: column;"> |
| | <span style="font-size: 3.5rem; font-weight: 900; color: var(--text);">100%</span> |
| | <span style="font-size: 0.9rem; text-transform: uppercase; font-weight: bold;">Responsabilidade<br>Humana</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="slide-number">05</div> |
| | </div> |
| |
|
| | <div class="slide"> |
| | <div style="text-align: center;"> |
| | <h1 style="margin-bottom: 2rem;">Muito Obrigado</h1> |
| | <p style="font-size: 1.6rem; max-width: 800px; margin: 0 auto;"> |
| | "O futuro da engenharia de sistemas não é competir com a IA, mas colaborar com ela para resolver problemas complexos." |
| | </p> |
| | |
| | <div style="margin-top: 5rem; display: inline-flex; gap: 5rem; text-align: left;"> |
| | <div> |
| | <h3 style="font-size: 1rem; color: var(--text-light);">CONTATO</h3> |
| | <p style="font-weight: 700; color: var(--primary); font-size: 1.2rem;">jairodaniel.mt@gmail.com</p> |
| | </div> |
| | <div> |
| | <h3 style="font-size: 1rem; color: var(--text-light);">INSTITUIÇÃO</h3> |
| | <p style="font-weight: 700; color: var(--primary); font-size: 1.2rem;">UNTELS - Peru</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="slide-number">06</div> |
| | </div> |
| |
|
| | <div class="controls"> |
| | <button class="btn-nav" onclick="changeSlide(-1)"><i class="fa fa-chevron-left"></i></button> |
| | <button class="btn-nav" onclick="changeSlide(1)"><i class="fa fa-chevron-right"></i></button> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | let currentSlide = 0; |
| | const slides = document.querySelectorAll('.slide'); |
| | |
| | function updateSlides() { |
| | slides.forEach((slide, index) => { |
| | slide.classList.remove('active'); |
| | if (index === currentSlide) slide.classList.add('active'); |
| | }); |
| | } |
| | |
| | function changeSlide(direction) { |
| | const next = currentSlide + direction; |
| | if (next >= 0 && next < slides.length) { |
| | currentSlide = next; |
| | updateSlides(); |
| | } |
| | } |
| | |
| | document.addEventListener('keydown', (e) => { |
| | if (e.key === 'ArrowRight' || e.key === 'Space') changeSlide(1); |
| | if (e.key === 'ArrowLeft') changeSlide(-1); |
| | }); |
| | </script> |
| |
|
| | </body> |
| | </html> |
