Romerito Campos

Romerito Campos

Developer. Professor

© 2025

šŸ“˜ Roteiro do Projeto - Temas e Templates Web

Objetivo Geral

Desenvolver dois conjuntos de templates para diferentes temas aplicando conceitos de design web responsivo, organizaĆ§Ć£o visual e interaĆ§Ć£o com o usuĆ”rio, utilizando HTML, CSS com Flexbox e JavaScript.

OrganizaĆ§Ć£o

  • Grupos: 4 alunos
  • DuraĆ§Ć£o: 7 semanas (27/06 a 15/08)

  • Entrega em duas etapas:

    • Etapa 1: Proposta e protĆ³tipo visual
    • Etapa 2: ImplementaĆ§Ć£o funcional e apresentaĆ§Ć£o

Cronograma e Atividades

Semana 1 (27/06 - 03/07)

Abertura e formaĆ§Ć£o dos grupos

  • ExplicaĆ§Ć£o do projeto e critĆ©rios
  • FormaĆ§Ć£o dos grupos
  • ApresentaĆ§Ć£o dos conceitos: tema, template, dashboard, admin, landing page
  • Atividade: brainstorming de temas possĆ­veis

EntregƔvel parcial: Documento de planejamento inicial (tema, tipo de pƔgina e justificativa)

Semana 2 (04/07 - 10/07)

Pesquisa e prototipaĆ§Ć£o

  • Cada grupo define 2 temas distintos (ex: e-commerce, portfĆ³lio de artista, painel de controle de escola, landing page para app, etc.)
  • Desenho dos templates para cada tema: estrutura geral da pĆ”gina, componentes (navbar, cards, tabelas, formulĆ”rios etc.)
  • Utilizar ferramentas como Figma ou rascunhos em papel.

EntregĆ”vel: ProtĆ³tipos visuais de pelo menos uma pĆ”gina para cada tema + justificativa de escolha

Semana 3 (11/07 - 17/07)

DefiniĆ§Ć£o do layout e estrutura HTML

  • Desenvolvimento das estruturas bĆ”sicas com HTML semĆ¢ntica

  • SeparaĆ§Ć£o por tipo de pĆ”gina:

    • Template 1: Dashboard
    • Template 2: Administrativo
    • Template 3: Landing page
  • Planejamento da arquitetura de arquivos

Semana 4 (18/07 - 24/07)

Estilo com CSS e Flexbox

  • AplicaĆ§Ć£o de Flexbox na construĆ§Ć£o dos layouts
  • CriaĆ§Ć£o de estilos para responsividade
  • UtilizaĆ§Ć£o de temas (ex: claro/escuro, minimalista, tecnolĆ³gico)

Fim da Etapa 1 ā€“ AvaliaĆ§Ć£o Parcial (100 pontos) CritĆ©rios:

  • Clareza na definiĆ§Ć£o dos temas (20 pt)
  • Prototipagem e identidade visual (40 pt)
  • EstruturaĆ§Ć£o inicial em HTML e uso de Flexbox (40 pt)

Semana 5 (25/07 - 31/07)

InteraƧƵes com JavaScript

  • InserĆ§Ć£o de interaƧƵes: menu mobile, sliders, validaĆ§Ć£o de formulĆ”rio, modais, entre outros
  • Uso de boas prĆ”ticas (separaĆ§Ć£o de responsabilidades, modularizaĆ§Ć£o simples)

Semana 6 (01/08 - 07/08)

Aprimoramento e testes

  • Testes em diferentes dispositivos
  • Refino do CSS e ajustes nos templates
  • PreparaĆ§Ć£o para a apresentaĆ§Ć£o

Semana 7 (08/08 - 14/08)

ApresentaĆ§Ć£o final

  • Cada grupo apresenta os dois temas com os respectivos templates desenvolvidos
  • DemonstraĆ§Ć£o de interaƧƵes
  • Justificativa das escolhas visuais e tĆ©cnicas

Fim da Etapa 2 ā€“ AvaliaĆ§Ć£o Final (100 pontos) CritĆ©rios:

  • Funcionalidade dos templates (40 pt)
  • InteraƧƵes JavaScript (20 pt)
  • ApresentaĆ§Ć£o e argumentaĆ§Ć£o (20 pt)
  • Responsividade e design final (20 pt)