| Semana | Capacidade Trabalhada | Tema | Conteúdo | Desenvolvimento | Recursos / T.A. |
|---|---|---|---|---|---|
| 1 | Compreender os fundamentos da Web e o funcionamento das páginas digitais. | Introdução à Web |
Aulas 1 a 5:
- História da Internet; - Evolução da Web; - Sites e aplicações; - Navegadores; - Funcionamento cliente e servidor. |
Apresentação dos conceitos utilizando exemplos reais.
Análise de sites conhecidos. Identificação dos elementos presentes em uma página web. |
Slides.
Vídeos educativos. Exemplos de sites. T.A.: - Utilizar imagens e esquemas visuais. - Explicação com exemplos do cotidiano. - Resumo simplificado. - Atividade dividida em etapas. |
| 2 | Reconhecer as tecnologias utilizadas no desenvolvimento Web. | Tecnologias Web |
Aulas 6 a 10:
- HTML; - CSS; - JavaScript; - Front-End; - Back-End; - Ferramentas de desenvolvimento. |
Comparação entre tecnologias.
Instalação e configuração das ferramentas: - Visual Studio Code; - Navegadores; - Extensões. |
Laboratório.
Editor de código. T.A.: - Ambiente previamente configurado. - Tutorial ilustrado. - Checklist de instalação. |
| 3 | Criar estruturas básicas utilizando linguagem HTML. | Introdução ao HTML |
Aulas 11 a 15:
- Conceito HTML; - Estrutura básica; - DOCTYPE; - TAG HTML; - HEAD; - BODY. |
Criação da primeira página HTML.
Construção passo a passo da estrutura. Execução no navegador. |
Visual Studio Code.
Navegador. T.A.: - Código inicial pronto para completar. - Identificação das partes por cores. - Explicação linha por linha. |
| 4 | Utilizar elementos HTML para organização e apresentação de conteúdos textuais. | Elementos de Texto HTML |
Aulas 16 a 20:
- Títulos HTML; - Parágrafos; - Quebras de linha; - Formatação de textos; - Comentários HTML. |
Construção de páginas informativas.
Exercícios criando: - Página pessoal; - Página institucional; - Página de apresentação. |
Editor VS Code.
Navegador. Exemplos prontos. T.A.: - Modelo visual da estrutura. - Código parcialmente preenchido. - Uso de cores para destacar tags. - Atividades menores e progressivas. |
| 5 | Aplicar recursos HTML para navegação e inserção de elementos externos. | Links e Imagens |
Aulas 21 a 25:
- Tag <a>; - Links internos; - Links externos; - Tag <img>; - Caminhos relativos e absolutos. |
Criação de uma página com:
- Menu de navegação; - Galeria de imagens; - Links entre páginas. |
Imagens educativas.
Exemplos reais. T.A.: - Banco de imagens selecionadas. - Roteiro visual para criação. - Menos elementos por exercício. - Apoio individual. |
| 6 | Organizar informações utilizando estruturas de listas HTML. | Listas HTML |
Aulas 26 a 30:
- Lista ordenada; - Lista não ordenada; - Lista de definição; - Listas aninhadas. |
Criação de páginas utilizando listas:
- Cardápios; - Listas de produtos; - Menus de sistemas. |
Editor HTML.
Exemplos visuais. T.A.: - Modelos prontos para adaptação. - Explicação utilizando exemplos concretos. - Atividade guiada. |
| 7 | Estruturar dados utilizando tabelas HTML. | Tabelas HTML |
Aulas 31 a 35:
- Tag TABLE; - Linhas; - Colunas; - Cabeçalho; - Mesclagem de células. |
Construção de tabelas:
- Notas escolares; - Produtos; - Relatórios. Aplicação dos atributos HTML. |
Exercícios práticos.
Modelos de tabelas. T.A.: - Tabela iniciada para completar. - Identificação visual das células. - Exercícios reduzidos. |
| 8 | Criar formulários para entrada e envio de informações. | Formulários HTML |
Aulas 36 a 40:
- FORM; - INPUT; - LABEL; - SELECT; - TEXTAREA; - BUTTON. |
Desenvolvimento de formulários:
- Cadastro de usuário; - Login; - Contato. Testes no navegador. |
Formulários modelos.
Editor de código. T.A.: - Campos organizados visualmente. - Explicação passo a passo. - Formulários menores. - Apoio com exemplos preenchidos. |
| 9 | Aplicar os recursos do HTML5 para criar páginas modernas. | HTML5 Semântico |
Aulas 41 a 45:
- Estrutura semântica; - HEADER; - NAV; - MAIN; - SECTION; - ARTICLE; - FOOTER. |
Reestruturação de páginas antigas utilizando HTML5.
Comparação: HTML tradicional x HTML5. |
Exemplos de sites profissionais.
Documentação HTML5. T.A.: - Diagrama visual da estrutura. - Modelo pronto para alteração. - Explicação por blocos. |
| 10 | Desenvolver páginas completas utilizando os principais elementos HTML. | Projeto HTML Inicial |
Aulas 46 a 50:
- Organização de páginas; - Estrutura de arquivos; - Pastas; - Boas práticas HTML. |
Projeto:
Criação de um site simples contendo: - Página inicial; - Menu; - Imagens; - Tabelas; - Formulários. |
Laboratório.
VS Code. Estrutura de projeto. T.A.: - Projeto modelo para adaptação. - Checklist das etapas. - Avaliação por partes. - Tempo adicional quando necessário. |
| 11 | Aplicar estilos visuais utilizando folhas de estilo CSS. | Introdução ao CSS |
Aulas 51 a 55:
- Conceito CSS; - CSS interno; - CSS externo; - CSS inline; - Associação entre HTML e CSS. |
Criação do primeiro arquivo CSS.
Aplicação de estilos: - Cores; - Tamanhos; - Espaçamentos; - Formatação visual. |
Visual Studio Code.
Navegador. T.A.: - Arquivo CSS inicial pronto. - Exemplos antes/depois. - Alterações pequenas e progressivas. - Guia visual dos comandos. |
| 12 | Utilizar seletores CSS para aplicar estilos aos elementos HTML. | Seletores CSS |
Aulas 56 a 60:
- Seletor de elemento; - Seletor de classe; - Seletor ID; - Seletores agrupados; - Hierarquia CSS. |
Atividades práticas aplicando estilos em páginas HTML.
Criação de: - Cartões; - Menus; - Blocos de conteúdo. |
Exemplos práticos.
Editor CSS. T.A.: - Seletores demonstrados visualmente. - Código comentado. - Atividades com modelos prontos. |
| 13 | Configurar propriedades visuais para melhorar a apresentação das páginas. | Cores, Fontes e Textos |
Aulas 61 a 65:
- Cores CSS; - Fontes; - Tamanhos; - Alinhamentos; - Estilos de texto. |
Personalização de páginas:
Aplicação de identidade visual. Escolha de: - Cores; - Tipografia; - Organização visual. |
Paletas de cores.
Exemplos de interfaces. T.A.: - Uso de modelos visuais. - Menor quantidade de opções. - Orientação para escolha de cores. |
| 14 | Compreender o modelo de caixas utilizado pelo CSS. | Box Model |
Aulas 66 a 70:
- Content; - Padding; - Border; - Margin; - Width; - Height. |
Construção de layouts utilizando caixas.
Exercícios: - Cards; - Painéis; - Seções de páginas. |
Representação visual do Box Model.
Ferramentas do navegador. T.A.: - Diagrama ilustrado. - Comparação com objetos físicos. - Exercícios simplificados. |
| 15 | Organizar elementos HTML utilizando técnicas modernas de layout. | Display, Position e Layout |
Aulas 71 a 75:
- Display block; - Display inline; - Display flex; - Position relative; - Position absolute; - Organização dos elementos. |
Criação de layouts:
- Cabeçalho; - Menu; - Conteúdo; - Rodapé. Aplicação prática em páginas Web. |
Exemplos de layouts.
Editor VS Code. T.A.: - Estrutura visual do layout. - Código inicial fornecido. - Explicação por etapas. |
| 16 | Criar layouts responsivos utilizando Flexbox. | CSS Flexbox |
Aulas 76 a 80:
- Container Flex; - Flex Direction; - Justify Content; - Align Items; - Distribuição de elementos. |
Construção de páginas responsivas:
- Menus; - Cards; - Galerias. Testes em diferentes tamanhos de tela. |
Navegador responsivo.
Ferramentas DevTools. T.A.: - Modelo Flexbox visual. - Exercícios com alteração de uma propriedade por vez. - Apoio individual. |
| 17 | Utilizar CSS Grid para construção de layouts estruturados. | CSS Grid |
Aulas 81 a 85:
- Grid Container; - Grid Columns; - Grid Rows; - Áreas do Grid; - Organização em blocos. |
Desenvolvimento de layouts:
- Dashboard; - Portais; - Páginas institucionais. |
Exemplos profissionais.
Ferramentas do navegador. T.A.: - Layout desenhado antes do código. - Divisão em pequenas partes. - Modelo base para completar. |
| 18 | Desenvolver interações básicas utilizando JavaScript integrado às páginas Web. | JavaScript Aplicado à Interface |
Aulas 86 a 90:
- Introdução ao JavaScript; - Inserção do JavaScript no HTML; - Variáveis; - Tipos de dados; - Operadores; - Eventos; - Manipulação básica de elementos. |
Criação de páginas interativas:
Exemplos: - Botões com ações; - Alteração de conteúdos; - Mensagens ao usuário; - Validações simples. |
Visual Studio Code.
Navegador. Exemplos práticos. T.A.: - Código inicial fornecido. - Exemplos visuais do funcionamento. - Atividades guiadas. - Explicação passo a passo. |
| 19 | Aplicar boas práticas de desenvolvimento Web considerando acessibilidade, organização e publicação. | Acessibilidade, SEO e Publicação Web |
Aulas 91 a 95:
- Conceitos de acessibilidade; - HTML semântico; - Boas práticas SEO; - Organização de arquivos; - Hospedagem de páginas; - Publicação de projetos. |
Análise e melhoria de projetos existentes.
Aplicação de: - Tags semânticas; - Textos alternativos em imagens; - Estrutura organizada; - Publicação de site. |
Checklist de qualidade.
Ferramentas de análise. Hospedagem Web. T.A.: - Lista de verificação visual. - Exemplos corretos e incorretos. - Atividades divididas em etapas. - Apoio individual. |
| 20 | Desenvolver uma aplicação Web completa utilizando os conhecimentos adquiridos durante a disciplina. | Projeto Integrador Web |
Aulas 96 a 100:
- Planejamento do projeto; - Estrutura HTML; - Estilização CSS; - Interações JavaScript; - Responsividade; - Apresentação final. |
Desenvolvimento de um projeto completo:
Etapas: 1 - Definição do tema; 2 - Criação da estrutura HTML; 3 - Aplicação CSS; 4 - Recursos interativos; 5 - Testes; 6 - Apresentação. |
Laboratório completo.
VS Code. Navegadores. Documentação do projeto. T.A.: - Projeto modelo para adaptação. - Divisão da entrega em pequenas etapas. - Checklist de acompanhamento. - Tempo adicional quando necessário. - Orientação individualizada. |