Desenvolvimento Web na Era da Inteligência Artificial — projeto integrador de Programação Web da 2ª série do Ensino Médio Integrado.
O Digital ao Extremo é o projeto integrador do componente de Programação Web do Curso Técnico em Informática. Em equipes, os estudantes identificam um problema real — social ou empresarial — e desenvolvem um site publicado na internet que proponha uma solução, aplicando HTML, CSS e JavaScript.
O projeto vale a nota de projeto do 3º bimestre e culmina na apresentação pública a duas bancas avaliadoras durante a Semana da Área Técnica (21 a 25/09/2026).
A edição 2026 mantém a essência do projeto — protagonismo estudantil, problemas reais e apresentação pública — e traz três mudanças estruturais:
Na edição anterior o uso de IA não era permitido. Em 2026 os estudantes podem e devem usá-la — com regras claras, registro transparente e verificação de que compreendem o que entregam. A IA como tutora, não como piloto automático.
Cada estudante registra semanalmente o que fez, o que aprendeu, suas dificuldades e como usou IA. O processo se torna visível e avaliável — não apenas o produto final.
Papéis rotativos, contribuições individuais rastreáveis no GitHub, checkpoints em sala, arguição e avaliação por pares. 30% da nota é individual — ninguém "pega carona" no grupo.
Por quê? Profissionais de tecnologia já trabalham com IA no dia a dia. Proibir cria um descompasso com a realidade profissional e empurra o uso para a clandestinidade — sem orientação e sem aprendizagem. Usar livremente e sem método gera dependência. O caminho escolhido é o mais exigente: ensinar a usar bem.
Apresentada na primeira semana e assinada por todos os estudantes em Termo de Compromisso. Inclui uma oficina de IA para desenvolvimento: bons prompts, limites das ferramentas (alucinações, vieses, privacidade), direitos autorais e verificação.
Qualquer integrante pode ser convidado, a qualquer momento — em sala ou na banca — a explicar ou modificar qualquer trecho do projeto. Todo uso relevante de IA é registrado no diário (ferramenta, objetivo, prompt principal e o que foi aproveitado), e o site final terá uma seção "Bastidores" contando como foi feito, incluindo o papel da IA.
Consequência pedagógica, não punitiva: uso não declarado identificado pelo professor não zera o trabalho — o grupo refaz a parte envolvida com acompanhamento e a entrega parcial tem redução de nota. Reincidência é tratada com a coordenação pedagógica.
Formato das aulas: 1 encontro semanal de 2 aulas de 50 min por turma, usado tanto para ensinar quanto para trabalhar no projeto. Os conteúdos são ensinados de forma aplicada, na medida em que o projeto avança: Git/GitHub na Sprint 1 e JavaScript nas Sprints 2 e 3. Como os alunos estudam em tempo integral, parte dos encontros será cedida para a produção — o trabalho acontece majoritariamente em sala, e a IA ajuda a destravar dúvidas quando o professor está com outro grupo.
Grupos de até 7 integrantes (recomendado de 6 a 7) por turma, trabalhando em sprints (ciclos de 2 a 3 semanas). Os papéis giram a cada sprint — todos passam por mais de uma função, e todos programam. Em grupos de 7, o papel de maior carga é compartilhado por uma dupla. O papel diz apenas quem é o _responsável_ por garantir aquela frente — não é uma caixinha fechada: todos ajudam em tudo e o trabalho é colaborativo.
Grupos grandes exigem mais controle. Quanto maior o grupo, maior o risco de participação desigual. Nos grupos de 7, os instrumentos individuais (commits semanais, checkpoints sem IA, arguição e avaliação por pares) são aplicados com rigor especial.
| Papel | Responsabilidade principal |
|---|---|
| Líder de Sprint | Organiza tarefas, acompanha prazos, contato com o professor |
| Arquiteto(a) de Código | Organização do repositório e padrões de código |
| Designer / UX | Identidade visual, protótipo, usabilidade e responsividade |
| Redator(a) de Conteúdo | Pesquisa, textos do site, fontes e créditos |
| QA / Testes | Testa em diferentes telas e navegadores, registra defeitos |
| Documentador(a) | Diário do grupo, registro de decisões e do uso de IA |
Mantido dentro do repositório GitHub do grupo (pasta /diario), o que também exercita versionamento:
Cada integrante usa a própria conta GitHub. A partir do Sprint 2, espera-se contribuição registrada toda semana (código, conteúdo ou diário).
Dois momentos individuais em sala, sem IA: cada estudante explica e modifica um trecho do site do próprio grupo.
Na banca, os avaliadores podem dirigir perguntas a qualquer integrante, inclusive por sorteio.
Ao final, cada estudante avalia a contribuição dos colegas com rubrica estruturada e confidencial.
| # | Requisito |
|---|---|
| 1 | Mínimo de 4 páginas/seções (Início, O Problema, A Solução, Equipe) + seção "Bastidores" sobre como o projeto foi feito, incluindo o uso de IA |
| 2 | HTML semântico (header, nav, main, section, footer...) |
| 3 | CSS próprio e responsivo — funcionar bem no celular e no computador |
| 4 | JavaScript: pelo menos 1 funcionalidade interativa funcionando (menu responsivo, validação de formulário, modo escuro, galeria, filtro, quiz...). Fazer além do mínimo é incentivado e avaliado qualitativamente pela banca — sem pontos por quantidade, desde que o grupo saiba explicar o que fez |
| 5 | Publicação no GitHub Pages, com link entregue ao professor |
| 6 | Repositório com commits de todos os integrantes e pasta /diario atualizada |
| 7 | Créditos e fontes de pesquisas, imagens e conteúdos gerados por IA |
Apresentação do projeto e da Política de IA às três turmas.
Formação das equipes, contas e primeiros passos no GitHub, definição do problema e da proposta.
Entrega 1 (14/08): Termo de Abertura + Termo de CompromissoConteúdo, identidade visual, repositório no ar, primeiras noções de JavaScript e 1º checkpoint sem IA.
Entrega 2 (04/09): Protótipo navegável no GitHub PagesFuncionalidades interativas, 2º checkpoint sem IA e ensaio do pitch. (07/09: feriado da Independência.)
Entrega 3 (18/09): Site final + repositório + diáriosPitch de até 10 minutos + arguição de até 10 minutos, para as bancas técnica e externa, em evento aberto à comunidade escolar.
Autoavaliação, avaliação por pares e retrospectiva (Entrega 4 em 02/10). Feedback das bancas e fechamento das notas até 09/10.
| Entrega | Data | Conteúdo |
|---|---|---|
| 1. Termo de Abertura | 14/08 | Equipe, papéis, problema escolhido, proposta de solução e termo de compromisso de uso de IA assinado |
| 2. Protótipo navegável | 04/09 | Estrutura HTML/CSS publicada no GitHub Pages |
| 3. Site final | 18/09 | Site completo com JavaScript + repositório organizado + diários completos |
| 4. Apresentação | 21–25/09 | Pitch e arguição perante as bancas na Semana da Área Técnica |
| 5. Fechamento | 02/10 | Autoavaliação, avaliação por pares e retrospectiva do grupo |
Entregas contínuas: diário individual (semanal), diário do grupo (por sprint), commits semanais a partir do Sprint 2 e dois checkpoints individuais sem IA.
A nota final de cada estudante combina o desempenho do grupo (60%) com o desempenho individual (40%) — vale como nota de projeto do 3º bimestre. O peso individual é reforçado porque, em grupos de até 7, a nota precisa refletir a contribuição real de cada um e desestimular a "carona".
| Instrumento | Peso |
|---|---|
| Diário de desenvolvimento individual (regularidade e qualidade) | 30 |
| Checkpoints "Mão na Massa" sem IA (2) | 30 |
| Arguição individual e participação nas aulas do projeto | 20 |
| Avaliação por pares (média recebida dos colegas) | 20 |
O resultado vai de 0 a 100 e é convertido para a escala da escola (0 a 10) dividindo por 10. Exemplo: 91,6 ÷ 10 = 9,2 — esse é o valor lançado como nota de projeto do 3º bimestre.
Fichas de avaliação: a Banca Técnica avalia 10 critérios (0–10 cada), incluindo os novos "domínio técnico na arguição" e "transparência no uso de IA". A Banca Externa mantém os 6 critérios de 2025 (clareza, criatividade, relevância, visual, facilidade de uso e comunicação). As fichas completas constam no documento do projeto.
As equipes de destaque recebem certificados nas categorias:
Maior nota final entre todas as equipes
Eleita pela banca externa
Eleito pela banca técnica
Identidade visual e experiência de uso
Votação aberta durante a Semana da Área Técnica
Está prevista a construção de uma plataforma web de acompanhamento neste mesmo endereço (digitalaoextremo.wendellaraujo.cloud), onde as equipes registrarão entregas e diários e o professor acompanhará o progresso de cada grupo e de cada estudante. Nesta primeira fase, o acompanhamento é feito via repositórios GitHub e formulários.
Este é um projeto fictício, criado apenas como modelo. Ele mostra, entrega por entrega, o que uma equipe deve produzir do início ao fim — para que ninguém tenha dúvida sobre o que entregar e em que formato.
Turma 2ª B · problema de natureza socioambiental escolhido: o descarte incorreto de óleo de cozinha usado no bairro, que entope o esgoto e polui os rios.
Solução proposta: um site chamado "Recicla Óleo" que ensina a armazenar o óleo, mostra onde entregá-lo (pontos de coleta) e conscientiza com um quiz e uma calculadora de impacto.
Documento inicial que define o rumo do projeto. O grupo entregou:
Nome do projeto: Recicla Óleo
Problema: Moradores do bairro jogam óleo de cozinha usado na pia. Isso entope tubulações e, ao chegar aos rios, um único litro de óleo pode contaminar até 20 mil litros de água.
Por que é relevante: é um problema real, local e com solução viável por informação e mobilização.
Solução (site): orientar o armazenamento correto, mapear pontos de coleta e engajar com quiz e calculadora de impacto.
Público-alvo: moradores do bairro e comércios (lanchonetes, restaurantes).
Divisão inicial de papéis: (tabela dos 7 integrantes com seus papéis).
Termo de Compromisso de uso de IA: assinado por todos os 7 integrantes. ✔
Cada integrante escreve o seu, dentro do repositório em /diario/nome.md. Exemplo de um registro da Marina (Designer):
**O que fiz:** criei o protótipo das 4 páginas no Figma e escolhi a paleta de verdes. Passei o cabeçalho para HTML/CSS. **O que aprendi:** a usar flexbox para alinhar o menu; a diferença entre padding e margin finalmente fez sentido. **Dificuldades:** o menu quebrava no celular. Resolvi estudando media queries. **Uso de IA:** registrado abaixo. 👇
Ferramenta: assistente de IA · Objetivo: entender por que meu menu não ficava responsivo.
Prompt principal: "Aja como um professor. Meu menu horizontal quebra no celular. Me explique o conceito de media query com um exemplo simples, mas não faça o código do meu site por mim."
O que aproveitei: entendi o conceito e escrevi a media query eu mesma, adaptando ao meu CSS. Consigo explicar cada linha.
Um registro por sprint em /diario/grupo.md, com as decisões coletivas:
As 4 páginas já no ar, com HTML semântico e CSS responsivo (ainda sem JavaScript):
codigo-verde.github.io/recicla-oleo (fictício)/diario atualizadaO site final, agora com JavaScript. O mínimo é 1 funcionalidade — este grupo foi além e fez 3:
Estrutura do pitch de 10 minutos que a equipe usou:
Na arguição, a banca sorteou a Júlia (QA) para explicar como testou o site em diferentes telas — ela respondeu com segurança. Todos dominavam o projeto.
Aplicando as fórmulas do projeto ao Grupo Código Verde (valores ilustrativos):