Para desenvolver Aula Prática Web Design, comece identificando os objetivos e as entregas solicitadas no roteiro. A seguir, veja os pontos presentes na descrição desta atividade e organize teu relatório de acordo com as orientações do curso.
O que é esta aula prática?
Antes de começar, leia a apresentação e identifique o tema, a unidade e o formato pedido.
Princípios básicos de design gráfico aplicados a interfaces web;
Desenvolvimento e aplicação de CSS externo para layout e apresentação;
Criação e exportação de elementos gráficos (JPEG, PNG, SVG) e organização de projeto;
Configuração de servidor local com XAMPP e criação de banco de dados (ex.: wordpress_db);
Instalação e personalização inicial do WordPress (tema e ajustes básicos).
Unidade: U3 _CONSTRUÇÃO DE WEBSITES
Aula: A2_FERRAMENTAS DE DESENVOLVIMENTO WEB
Tempo previsto de execução de aula prática: 3h (CAMPO OBRIGATÓRIO – NÃO APARECER EM
Objetivos e conhecimentos trabalhados
Use os objetivos do roteiro para definir o que a atividade precisa demonstrar.
OBJETIVOS (campo obrigatório – exibição para todos)
Definição dos objetivos da aula prática:
Compreender os princípios básicos de design gráfico e aplicação em elementos web.
Aprender a desenvolver folhas de estilo (CSS) para páginas web.
Integrar elementos gráficos e folhas de estilo para criar uma interface de usuário coesa e
INFRAESTRUTURA (OBRIGATÓRIO SE HOUVER – EXIBIÇÃO DOCENTE/TUTOR)
Instalações – Materiais de consumo – Equipamentos:
OBJETIVOS (campo obrigatório – exibição para todos)
Definição dos objetivos da aula prática:
Realizar o download e instalação do wordpress em um servidor local;
Realizar a instalação de um tema ao wordpress;
Estilizar a página inicial (opcional);
INFRAESTRUTURA (OBRIGATÓRIO SE HOUVER – EXIBIÇÃO DOCENTE/TUTOR)
Instalações – Materiais de consumo – Equipamentos:
Ferramentas e materiais mencionados no roteiro
Prepare os recursos citados na atividade e registre as versões ou configurações usadas quando forem relevantes.
SOLUÇÃO DIGITAL (OBRIGATÓRIO SE HOUVER – APARECER PARA TODOS)
Infraestrutura mínima necessária para execução.
Acesso a um computador com software de edição de código e imagem.
Visual Studio Code (VS Code) é um editor de código-fonte gratuito e de código aberto
desenvolvido pela Microsoft. Ele é altamente personalizável, com suporte para uma ampla
variedade de linguagens de programação e extensões.
GIMP (GNU Image Manipulation Program)
GIMP é um software gratuito e de código aberto para edição de imagens e design gráfico. Ele
oferece uma ampla gama de ferramentas de manipulação de imagem, como retoque,
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI) (CAMPO OBRIGATÓRIO – APARECER
DESCRIÇÃO OS EPIs NECESSÁRIOS PARA A REALIZAÇÃO DA AULA PRÁTICA
SOLUÇÃO DIGITAL (OBRIGATÓRIO SE HOUVER – APARECER PARA TODOS)
Infraestrutura mínima necessária para execução.
Para a realização desta aula pratica você deverá ter o software ter o XAMPP e WordPress
Faça o download e instale na sua máquina: https://www.apachefriends.org/download.html
Faça o download do wordpress: https://wordpress.org/download/;
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI) (CAMPO OBRIGATÓRIO – APARECER
DESCRIÇÃO OS EPIs NECESSÁRIOS PARA A REALIZAÇÃO DA AULA PRÁTICA
Como desenvolver a atividade passo a passo
Execute cada etapa na ordem indicada e registre o que foi feito para depois explicar o processo no relatório.
Esta atividade prática de Web Design, vinculada à disciplina Web Design, reúne procedimentos de construção de websites e de uso de sistemas de gestão de conteúdo. Na Unidade U3 (Aula A2 – Ferramentas de Desenvolvimento Web) o foco é a criação de páginas HTML com elementos gráficos e folhas de estilo CSS, integrando design gráfico e código. Na Unidade U4 (Aula A4 – Ferramentas CMS) a sequência aborda a configuração de um servidor local e a instalação do WordPress para gestão de conteúdo.
O material indica a infraestrutura mínima e os softwares recomendados: acesso à internet, computador com editor de código e software de edição de imagem. Entre os programas citados estão Visual Studio Code (editor de código) e GIMP (edição de imagens); para o trabalho com CMS são mencionados XAMPP (servidor local) e WordPress. A atividade inclui procedimentos práticos para criação e organização de arquivos do projeto (HTML, CSS, imagens) e para preparação do ambiente local, banco de dados e tema do WordPress.
O que é desenvolvido nesta atividade — Desenvolver competências para criar a estrutura básica de uma página web (cabeçalho, área de conteúdo com imagem e texto, rodapé), elaborar folhas de estilo externas (styles.css) para controle visual, integrar gráficos exportados em formatos adequados (JPEG, PNG, SVG) e testar a página em navegador. Complementarmente, configurar um ambiente local com XAMPP, criar um banco de dados para o WordPress, realizar a instalação do WordPress e instalar/ativar um tema para personalização inicial.
PROCEDIMENTOS PRÁTICOS (OBRIGATÓRIO – TODOS)
Procedimento/Atividade nº 1 (Virtual)
Desenvolver elementos gráficos e folhas de estilo para uma página web. Crie uma página
HTML que inclua gráficos personalizados e estilize-a usando CSS. Sua página deve ter um
cabeçalho, uma área de conteúdo com uma imagem e texto estilizado, e um rodapé.
Procedimentos para a realização da atividade:
Link do vídeo ilustrativo da aula: (NÃO OBRIGATÓRIO – APARECER QUANDO DISPONÍVEL)
Qualquer ajuste ou alteração do procedimento poderá ocorrer, sem qualquer prejuízo na
realização da aula prática. (COMENTÁRIO SERÁ APRESENTADO APENAS NO RAP DO
Passo-a-passo do procedimento para a execução da atividade/procedimento prático.
Passo 1: Configuração do Ambiente de Desenvolvimento
1. Instale um editor de código: VS Code, Sublime Text ou Atom.
2. Atualize seu navegador web: Google Chrome, Firefox ou Edge.
3. Instale um software de design gráfico: Adobe Photoshop, Illustrator, GIMP ou Inkscape.
Passo 2: Criação de Elementos Gráficos
1. Abra seu software de design gráfico.
2. Crie um novo projeto com as dimensões desejadas para seu gráfico (ex.: 1920×1080
3. Desenhe seu elemento gráfico (ícone, botão, banner, etc.).
o Para gráficos complexos: use JPEG.
o Para gráficos com transparência: use PNG.
o Para gráficos vetoriais: use SVG.
5. Salve os arquivos gráficos em uma pasta do seu projeto (ex.: images).
Aula: A4_SISTEMA DE GESTÃO DE CONTEÚDO PARA WEB
Tempo previsto de execução de aula prática: 5h (CAMPO OBRIGATÓRIO – NÃO APARECER EM
PROCEDIMENTOS PRÁTICOS (OBRIGATÓRIO – TODOS)
Procedimento/Atividade nº 1 (Virtual)
Configurar o ambiente de instalação para o framework WordPress, instalar o mesmo e realizar
as configurações iniciais de um tema padrão. Se desejar, realizar a estilização da página inicial.
Procedimentos para a realização da atividade:
Link do vídeo ilustrativo da aula: (NÃO OBRIGATÓRIO – APARECER QUANDO DISPONÍVEL)
Qualquer ajuste ou alteração do procedimento poderá ocorrer, sem qualquer prejuízo na
realização da aula prática. (COMENTÁRIO SERÁ APRESENTADO APENAS NO RAP DO
Passo-a-passo do procedimento para a execução da atividade/procedimento prático.
1. Localize o local onde o XAMPP foi instalado no seu computador e crie uma pasta
com o nome “wordpress” dentro do caminho “xampphtdocs”.
2. Faça o download do wordpress: https://wordpress.org/download/;
3. Descompacte o arquivo e copie o seu conteúdo para dentro da pasta “wordpress”.
4. Procure pelo aplicativo Xampp Control Panel e execute o mesmo. Clique em “start”
tanto para a opção “Apache” quanto “MySql”. Seu servidor localhost estará ativo e você
5. No seu navegador digite o endereço http://localhost/phpmyadmin/.
6. No menu à esquerda selecione a opção “New” para criar um novo banco de dados,
conforme demonstrado na figura abaixo:
7. Vamos criar um banco de dados com o nome “wordpress_db”:
8. Agora abra o navegador e digite o endereço http://localhost/wordpress.
Lembre-se de inserir o nome correto do banco de dados apenas criado:
Como conferir e avaliar o trabalho
Confira os critérios e perguntas do roteiro antes de finalizar a entrega.
Checklist:
Estrutura básica de uma página HTML.
Arquivo CSS externo vinculado à página HTML.
Aplicação de estilos básicos (cores, fontes, margens, etc.).
Inclusão de elementos gráficos na página HTML.
Estilização de elementos gráficos usando CSS.
Checklist:
1. Aquisição e inicialização do aplicativo Xampp;
2. Criação do banco de dados da loja;
3. Download e instalação do framework wordpress;
Resultados e organização do relatório
Apresente o que foi obtido e relacione os resultados com os objetivos da atividade.
Resultados de Aprendizagem:
Capacidade de criar e aplicar elementos gráficos para uso em páginas web.
Competência no desenvolvimento de folhas de estilo CSS para controlar o layout e a
apresentação visual de páginas web.
Habilidade de integrar elementos gráficos e CSS para construir interfaces web
esteticamente agradáveis e funcionais.
ESTUDANTE, VOCÊ DEVERÁ ENTREGAR (não obrigatório – aparecer para todos)
Descrição orientativa sobre a entregada da comprovação da aula prática:
o Deve conter a estrutura básica da página.
o Inclusão de elementos gráficos conforme a atividade.
o Deve conter estilos aplicados aos elementos gráficos e outros componentes da
o Arquivos gráficos utilizados na página (JPEG, PNG, SVG).
o Captura de tela da página web finalizada.
REFERÊNCIAS BIBLIOGRÁFICAS (não obrigatório – aparecer para todos)
Descrição (em abnt) das referências utilizadas
PAZ, Mônica. WebDesign. 1 ed. Curitiba: InterSaberes, 2021. [Biblioteca Virtual 3.0]
Resultados de Aprendizagem:
Compreensão dos Componentes de um Servidor Local
Configuração Inicial de um Servidor Local
Criação e Gerenciamento de Banco de Dados
Instalação e Configuração do WordPress
Gestão e Personalização de Temas no WordPress
ESTUDANTE, VOCÊ DEVERÁ ENTREGAR (não obrigatório – aparecer para todos)
Descrição orientativa sobre a entregada da comprovação da aula prática:
É esperado que o aluno ao término da pratica saiba configurar um CMS WordPress e entregue
um conjunto de pastas na estrutura do wordpress: serão os arquivos presentes na pasta
wordpress dentro de C:/Xampp/htdocs/. Não se esqueça de realizar todos os passos do
exercício e adicionar características necessárias para a visualização do seu CMS. Importar um
script (.sql) com os dados referentes ao banco de dados wordpress_db.
REFERÊNCIAS BIBLIOGRÁFICAS (não obrigatório – aparecer para todos)
Descrição (em abnt) das referências utilizadas
PAZ, Mônica. WebDesign. 1 ed. Curitiba: InterSaberes, 2021. [Biblioteca Virtual 3.0]
O seu trabalho é disponibilizado pronto, respondido e nas normas já na mesma hora aqui em nosso site na sua área de downloads e também no seu e-mail.
Como estruturar o relatório
Organize a entrega em identificação da atividade, objetivos, recursos utilizados, descrição dos procedimentos, registros dos resultados e conclusão. Ajuste essa sequência ao modelo exigido pela instituição e inclua apenas observações e evidências obtidas durante a tua própria execução.
Checklist antes de entregar
- Conferir se todos os objetivos do roteiro foram contemplados.
- Descrever os procedimentos na ordem em que foram realizados.
- Inserir registros, imagens ou arquivos quando a atividade solicitar.
- Relacionar os resultados com as tarefas e revisar o formato de entrega exigido.
