Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 5 visualizações

    Roteiro Aula Prática: Web Design

    Enviado por

    riquemilion

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd

    Roteiro Aula Prática: Web Design

    Enviado por

    riquemilion
    5 visualizações12 páginas

    Título original

    17225421583 (1)

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Fazer download em pdf ou txt
    5 visualizações12 páginas

    Roteiro Aula Prática: Web Design

    Enviado por

    riquemilion

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Fazer download em pdf ou txt
    Você está na página 1de 12

    Roteiro

    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.: 1920x1080
    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):
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Minha Pagina Web</title>
    </head>
    <body>
    <div class="header">
    <h1>Bem-vindo à minha Pagina</h1>
    </div>
    <div class="content">
    <img src="images/banner.jpg" alt="Banner" class="image">
    <p>Este é um exemplo de paragrafo estilizado com CSS.</p>
    </div>
    <div class="footer">
    <p>&copy; 2024 - Web Design</p>
    </div>
    </body>
    </html>

    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 <img> 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]

    6
    Roteiro
    Aula Prática

    WEB DESIGN
    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 “xampp\htdocs\”.
    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ê
    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. Agora abra o navegador e digite o endereço http://localhost/wordpress.


    9. 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;
    10. Terminada a instalação, acesse o painel, conforme sugerido, utilizando o usuário e
    senha escolhidos.

    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.

    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

    5
    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]

    Você também pode gostar