# Roteiro de Apresentação - Knowledge AI

## Duração

De cinco a sete minutos, seguidos de perguntas.

## Preparação

- [ ] URL aberta.
- [ ] Dados fictícios preparados.
- [ ] DevTools disponível.
- [ ] README aberto.
- [ ] Capturas de contingência.
- [ ] Notificações desativadas.
- [ ] Nenhum dado pessoal visível.
- [ ] Cronômetro preparado.

## 1. Problema - 30 segundos

> Equipes acumulam documentos, mas encontrar uma informação confiável e sua origem continua difícil.

Explique:

- quem possui o problema;
- por que ele importa;
- qual é o recorte do protótipo.

## 2. Proposta - 30 segundos

> A Knowledge AI organiza documentos e prepara uma experiência de consulta na qual as respostas permanecem ligadas às fontes.

Não apresente funcionalidades futuras como concluídas.

## 3. Demonstração - 2 minutos

1. Mostre a página.
2. Explique a organização do conteúdo.
3. Redimensione para versão mobile.
4. Navegue com teclado.
5. Preencha o formulário com dados fictícios.
6. Mostre carregamento e sucesso.
7. Utilize `@erro.local`.
8. Mostre preservação dos dados.

## 4. Decisões técnicas - 1 minuto

Explique:

- HTML semântico;
- mobile first;
- Flexbox e Grid;
- evento `submit`;
- validação nativa;
- `textContent`;
- região viva;
- CSP inicial.

## 5. Qualidade - 45 segundos

Apresente:

- lista de verificação;
- console limpo;
- recursos carregados;
- tamanhos testados;
- ausência de credenciais;
- resultado da auditoria.

## 6. Limitações - 30 segundos

Exemplos:

- o formulário é simulado;
- ainda não existe API;
- não existe persistência;
- a política de privacidade não é definitiva;
- autenticação será adicionada depois.

## 7. Próximos passos - 30 segundos

- aprofundar JavaScript;
- consumir APIs;
- criar back-end;
- armazenar dados no MySQL;
- adicionar autenticação;
- integrar IA.

## 8. Encerramento - 15 segundos

> Esta entrega demonstra a base web sobre a qual os recursos full-stack e de IA serão construídos.

## Perguntas prováveis

### Por que não utilizou um framework?

Para consolidar HTML, CSS, JavaScript, HTTP e acessibilidade antes de adicionar abstrações.

### Por que o formulário não envia dados?

Esta etapa ensina comportamento no navegador. API, validação de servidor e persistência serão introduzidas posteriormente.

### Por que utilizar `textContent`?

Para inserir texto sem interpretá-lo como HTML, reduzindo risco ao trabalhar com conteúdo dinâmico.

### A CSP torna a página segura?

Não. Ela reduz algumas superfícies de ataque, mas não substitui validação, autorização, atualização, configuração do servidor e tratamento seguro dos dados.

### Por que testar teclado?

Porque controles precisam permanecer utilizáveis sem mouse e porque isso revela problemas de semântica, foco e ordem de navegação.

## Avaliação pessoal

Depois da apresentação:

- o tempo foi respeitado?
- a proposta ficou clara?
- o fluxo funcionou?
- uma decisão foi explicada com razão?
- uma limitação foi reconhecida?
- alguma pergunta não foi respondida?