Aula Prática Web Design

Aula Prática Web Design

ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: Web Design
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
NENHUM RAP)
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
visualmente atraente.
INFRAESTRUTURA (OBRIGATÓRIO SE HOUVER – EXIBIÇÃO DOCENTE/TUTOR)
Instalações – Materiais de consumo – Equipamentos:
NSA
SOLUÇÃO DIGITAL (OBRIGATÓRIO SE HOUVER – APARECER PARA TODOS)
Infraestrutura mínima necessária para execução.
 Acesso à internet para pesquisa.
 Acesso a um computador com software de edição de código e imagem.
Visual Studio Code
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,
composição e criação de imagens.
PROCEDIMENTO PARA INSTALAÇÃO: NSA
2
LINK:
https://www.gimp.org/
https://code.visualstudio.com/
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI) (CAMPO OBRIGATÓRIO – APARECER
PARA TODOS)
DESCRIÇÃO OS EPIs NECESSÁRIOS PARA A REALIZAÇÃO DA AULA PRÁTICA
NSA
PROCEDIMENTOS PRÁTICOS (OBRIGATÓRIO – TODOS)
Procedimento/Atividade nº 1 (Virtual)
Atividade proposta:
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
ALUNO)
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
pixels para um banner).
3
3. Desenhe seu elemento gráfico (ícone, botão, banner, etc.).
4. Exporte o gráfico:
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).

Passo 3: Desenvolvimento da Estrutura HTML
1. Crie um novo arquivo HTML no seu editor de código e salve-o como index.html.
2. Adicione a estrutura básica do seu HTML (abaixo segue um exemplo padrão):

Passo 4: Desenvolvimento da Folha de Estilo CSS 4 1. Crie um novo arquivo CSS no seu editor de código e salve-o como styles.css. 2. Adicione estilos básicos ao seu CSS: body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .header { … } .content { … } Passo 5: Integração de Gráficos e CSS 1. Insira os gráficos no HTML usando a tag e adicione classes para estilização. 2. Aplique estilos CSS aos gráficos e outros elementos para garantir que a página tenha uma aparência coesa.

Passo 6: Teste da Página Web
1. Abra o arquivo index.html no seu navegador.
2. Verifique se todos os elementos gráficos estão aparecendo corretamente.
3. Cheque se os estilos CSS foram aplicados como esperado.
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.
RESULTADOS (obrigatório – aparecer para todos)
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.
5
 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:
 Arquivo HTML:
o Deve conter a estrutura básica da página.
o Inclusão de elementos gráficos conforme a atividade.
 Arquivo CSS:
o Deve conter estilos aplicados aos elementos gráficos e outros componentes da
página.
 Imagens e Gráficos:
o Arquivos gráficos utilizados na página (JPEG, PNG, SVG).
 Captura de Tela:
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]

ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: Web Design
Unidade: U4 _FERRAMENTAS CMS
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
NENHUM RAP)
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);
 Testar a aplicação desenvolvida.
INFRAESTRUTURA (OBRIGATÓRIO SE HOUVER – EXIBIÇÃO DOCENTE/TUTOR)
Instalações – Materiais de consumo – Equipamentos:
NSA
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
instalados no seu computador.
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/;
PROCEDIMENTO PARA INSTALAÇÃO: NSA
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI) (CAMPO OBRIGATÓRIO – APARECER
PARA TODOS)
DESCRIÇÃO OS EPIs NECESSÁRIOS PARA A REALIZAÇÃO DA AULA PRÁTICA
NSA
2
PROCEDIMENTOS PRÁTICOS (OBRIGATÓRIO – TODOS)
Procedimento/Atividade nº 1 (Virtual)
Atividade proposta:
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
ALUNO)
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.
4.
Descompacte o arquivo e copie o seu conteúdo para dentro da pasta “wordpress”.
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ê
poderá utiliza-lo.
5.
No seu navegador digite o endereço http://localhost/phpmyadmin/.
3
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.
11. Instalar Tema:
 No painel do WordPress, ir para Aparência > Temas > Adicionar Novo.
 Instalar e ativar tema da biblioteca ou carregar tema .zip baixado.
Agora abra o navegador e digite o endereço http://localhost/wordpress.
9.
10.
Siga os passos da instalação:
 Lembre-se de inserir o nome correto do banco de dados apenas criado:
“wordpress_db”;
 O usuário do banco de dados costuma ser “root” por default, e a senha costuma
ficar vazia;
 Insira o título do site, usuário e senha à sua escolha;
Terminada a instalação, acesse o painel, conforme sugerido, utilizando o usuário e
senha escolhidos.
4
12 . Personalizar Tema:
 Ir para Aparência > Personalizar.
 Ajustar as configurações do tema conforme preferências.
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;
 4. Instalação do tema;
 5. Criação do seu CMS;
RESULTADOS (obrigatório – aparecer para todos)
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.