INFOSHOW 2026

Apresentação do Curso de Informática 2026/28

Visão Geral

Apresentação interativa em slides sobre o Curso Técnico em Informática 2026/28, com navegação entre slides, modais informativos e efeitos visuais.

---

Tecnologias Utilizadas

1. HTML5

• Estrutura semântica
• Meta tags para responsividade (viewport)
• Suporte a múltiplos idiomas (lang="pt-BR")
• Canvas para partículas (#tsparticles)

2. CSS3

• Variáveis CSS (:root) para tema
• Flexbox e Grid
• Animações com @keyframes
• Efeitos visuais:
  • backdrop-filter: blur() (glassmorphism)
  • transform e transition
  • Gradientes radiais e lineares
  • Sombras (box-shadow, text-shadow)
• Scrollbar customizada
• Media queries (responsividade)

3. JavaScript (Vanilla)

• Manipulação do DOM
• Event listeners (teclado, mouse, clique)
• Gerenciamento de estado (slides ativos)
• Criação dinâmica de elementos
• MutationObserver para efeitos condicionais
• Sistema de modais customizado

4. Bibliotecas Externas (CDN)

a) Font Awesome 6.0.0

• Ícones (Google Fonts CDN)
• Uso: fas fa-*

b) Google Fonts

• Fontes: Roboto (texto) e Montserrat (títulos)
• Pesos: 300, 400, 600, 700, 800

c) tsParticles 2

• Partículas animadas no fundo
• Configuração: 50 partículas, cores do tema, links entre partículas, efeito bounce

5. Recursos de Mídia

• Imagens PNG: logo_escola.png, I_love_Info.png, feliz_ano_novo.png

---

Arquitetura e Padrões

Estrutura de Arquivos

Seminario-INFO-2026/
├── index.html          # Estrutura principal
├── index.css           # Estilos completos
├── index.js            # Lógica de interação
├── ano_novo.html       # Página especial de ano novo
└── assets/             # Imagens

Padrões de Design

1. Design System

Cores via variáveis CSS:

• Verde Ceará: #009639
• Amarelo: #ffcc29
• Azul Neon: #00d4ff
• Dark theme: #121212

2. Componentes Reutilizáveis

• Cards de equipe
• Cards de pilares
• Itens de disciplina
• Modal customizado
• Barra de progresso

3. UX/UI

• Navegação por teclado (setas, ESC)
• Feedback visual (hover, transições)
• Modais com backdrop blur
• Barra de progresso
• Animações suaves

---

Funcionalidades Implementadas

1. Sistema de Slides

• Navegação sequencial (anterior/próximo)
• Transições com fade e scale
• Indicador de progresso
• 12 slides no total

2. Sistema de Modais

• Substituição de alert() nativo
• Abertura/fechamento animado
• Fechamento por ESC, clique fora ou botão X
• Conteúdo dinâmico via JavaScript

3. Efeitos Visuais

• Partículas de fundo (tsParticles)
• Slide especial de Ano Novo com:
  • Fogos de artifício (clique e automático)
  • Confetes
  • Partículas caindo
  • Estrelas piscantes
  • Animações de texto (glow, gradient, float)

4. Interatividade

• Hover em disciplinas (ícone de olho)
• Cards clicáveis
• Navegação por teclado
• Efeitos condicionais por slide

---

Técnicas Avançadas

CSS

• CSS Variables para tema
• backdrop-filter para glassmorphism
• Animações com @keyframes
• Custom properties para animações dinâmicas (--x, --y)

JavaScript

• MutationObserver para detecção de mudanças
• Gerenciamento de intervalos/timeouts
• Criação dinâmica de elementos
• Event delegation

Performance

• Lazy loading de efeitos (inicialização condicional)
• Cleanup de intervalos ao sair do slide
• Otimização de animações (GPU acceleration)

---

Responsividade

• Media queries para mobile
• Layout flexível (Flexbox/Grid)
• Tamanhos de fonte adaptativos
• Containers com max-width

---

Conclusão

Projeto front-end desenvolvido com HTML5, CSS3 e JavaScript vanilla, utilizando bibliotecas externas para ícones, fontes e partículas. Implementa modais customizados, sistema de slides, efeitos visuais e interatividade, com foco em UX e performance.