Roteiro de aula prática

Disciplina: Programação Web

Unidade: 2

Aula: U2A3

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

1. Desenvolver uma interface front-end utilizando HTML com elementos de texto e imagens;
2. Aplicar estilização e posicionamento nos elementos de texto e imagens com uso da CSS.
3. Testar a aplicação dos efeitos de estilização em um navegador e corrigir possíveis erros
até alcançar o efeito esperado.

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e CSS, podendo ser
NotePad ++, VSCode.

SOFTWARE

• NotePad ++: https://notepad-plus-plus.org/downloads/

• VSCode: https://code.visualstudio.com/download

Software (X) Acesso online ( )

Em caso afirmativo, qual? NotePad ++, VSCode,

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE
Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

PROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver uma página HTML com elementos de texto e imagens que devem ser estilizados e
posicionados com uso de CSS.

Procedimentos para a realização da atividade:

Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.

1. Utilizando o editor de código escolhido crie um documento HTML e salve esse como
"index.html";
2. Crie uma estrutura básica HTML;
3. No corpo do documento HTML tag "body" vamos desenvolver uma página com os
elementos ilustrados na imagem abaixo:
Seguindo a imagem acima crie:
1. "AS TECNOLOGIAS FRONT END" com um marcador de titulo "h1";
2. "A hypertext markup language" com um marcador de titulo "h2";
3. Insira a imagem com uma tag "img";
4. O texto "HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais
básico da web. Define o significado e a estrutura do conteúdo da web. Outras
tecnologias além do HTML geralmente são usadas para descrever a
aparência/apresentação (CSS) ou a funcionalidade/comportamento (JavaScript) de uma
página da web. "Hipertexto" refere-se aos links que conectam páginas da Web entre si,
seja dentro de um único site ou entre sites. Links são um aspecto fundamental da web.
Ao carregar conteúdo na Internet e vinculá-lo a páginas criadas por outras pessoas,
você se torna um participante ativo na world wide web." deve estar dentro de uma tag de
paragrafo "p".

Após a aplicação do CSS teremos o resulta mostrado na imagem abaixo:

CSS:
1. A tag "html" implementa sua imagem de fundo responsiva com um seletor CSS de HTML
com as seguinte propriedades: "background: url(../img/fundo_med.jpg) no-repeat center
center fixed; background-size: cover;"
2. Todo o conteudo da tag "body" deve ser evlovido em uma tag "div" que aplica uma
classe CSS chamada de "container" com as seguinte propriedades: margin: 0 auto;
width: 960px;"
3. A tag "body" implementa um seletor CSS de HTML com as seguintes propriedades: font-
family: "Verdana, Geneva, Tahoma, sans-serif; line-height: 1.6;"
4. A tag h1 implementa um seletor CSS de HTML com as seguintes propriedades:
"background-color: #FFF; padding: 10px;"
5. A tag h2 implementa um seletor CSS de HTML com as seguintes propriedades: "font-
family: "border-bottom: 1px dashed #7E9F19; margin: 0;"
6. As tags "", "img" e "p" estão dentro de uma tag "div" que implementa uma classe CSS
chamada "bloco" com as seguintes propriedades: "background-color: #FFF; border-
color: #CCC #999 #999 #CCC; border: 1px solid #CCC; margin-top: 20px; padding:
10px;"
7. A tag img implementa um seletor CSS de HTML com as seguintes propriedades:
"border: 1px solid #999; float: left; margin: 10px 10px 0 0; padding: 2px;"
8. Após essas codificações importar o arquivo CSS dentro do aarquivo HTML com uso da
tag “link” dentro da tag “head”;
9. Execute o arquivo HTML em um navegador moderno e veja o resultado se algo ficou
fora do esperado revise os passos;
 Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

1. Aquisição de um dos editores de código sugeridos nesse documento;

2. Criação do arquivo HTML e sua estrutura;
3. Criação do arquivo CSS e suas classes e seletores;
4. Execução, teste e depuração quando houver necessidade;

RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Um arquivo HTML com as implementações de suas tags e conteúdos (textos e imagens) e um

arquivo CSS com as implementações de suas classes e seletores.
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas

Digite aqui
Roteiro de aula prática

Disciplina: Programação Web

Unidade: 3

Aula: U3A1

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

4. Desenvolver uma interface front-end simples utilizando HTML com elementos de

formulário a serem manipulados pela linguagem JavaScript.
5. Desenvolver um algoritmo JavaScript capaz de manipular os elementos HTML tratando
um vento de click de mouse, recebendo dados digitados e selecionados, verificando e
convertendo esses dados e realizando cálculos de acordo com a operação matemática
selecionada pelo usuário e por fim exibir o resultado.
6. Testar a aplicação desenvolvida e analisar os resultados, inclusive possíveis erros de
programação buscando a correção desses sempre que necessário.

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e JavaScript, podendo
ser NotePad ++, VSCode.

SOFTWARE

• NotePad ++: https://notepad-plus-plus.org/downloads/

• VSCode: https://code.visualstudio.com/download

Software (X) Acesso online ( )

Em caso afirmativo, qual? NotePad ++, VSCode.

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE

Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

PROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver um formulário HTML que permite ao usuário informar dois valores numéricos e
escolher um operador matemático (soma, subtração, multiplicação ou divisão), clicar em um
botão e receber o resultado na mesma tela. Para realizar a captura dos valores digitados e do o
operador informado, realizar o calculo e a exibição desse resultado, deverá ser desenvolvido na
mesma página HTML do formulário um algoritmo JavaScript capaz de realizar as ações
acessando e manipulando os elementos HTML do formulário.

Procedimentos para a realização da atividade:

Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.

4. Utilizando o editor de código escolhido crie um documento HTML e salve esse como
"calculadora.html";
5. Crie uma estrutura básica HTML;
6. No corpo do documento HTML tag "body" crie um formulário tag "form";
 7. Com uso da HTML deverá ser desenvolvida o formulário ilustrada abaixo:

Seguindo a imagem do formulário fornecido nessa descrição crie:

5. Um rótulo tag "label" que deve exibir no navegador a palavra "NUMERO 1" esse label
deve estar associado a primeira caixa de texto propriedade "for";
6. Crie um caixa de texto tag "input" do tipo numero propriedade "type" e com as
propriedades "name" e "id" como "numero1";
7. Crie um elemento de seleção tag "select" com as opçoes tag "option" de "+", "-", "*" e "/"
representando as quatro operaçõe aritiméticas;
8. Um rótulo tag "label" que deve exibir no navegador a palavra "NUMERO 2" esse label
deve estar associado a primeira caixa de texto propriedade "for";
9. Crie um caixa de texto tag "input" do tipo numero propriedade "type" e com as
propriedades "name" e "id" como "numero2";
10. Crie um botão tag "button" com a propriedade "type" definido o tipo de botão "submit",
esse botão deve exibir a palavra "CALCULAR";
11. Crie uma "div" com a propriedade "name" definida como "resultado.

JavaScript:

10. Na tag "head" da HTML defina uma área para codificação JavaScript tag "script";
11. Nessa área definida para codificação JavaScript crie uma função nomeada como
calcular;
12. A função calcular devera ser capaz de realizar a seguintes tarefas:
a. Receber o valor do campo de texto que recebe o primeiro numero e converter
esse dado para o tipo float;
b. Receber o valor do campo de texto que recebe o segundo numero e converter
esse dado para o tipo float;
c. Receber o operador aritimetico selecionado na caixa de seleção;
d. Verificar qual operdor foi escolhido com o uso de uma sequencia estruturas de
decisão "if" ou uma estrutura de seleção "switch...case";
e. Após a indetificação do operador aritimético deverá ser realizada a operação
escolhida com os valores numericos e em seguida o resultado deve ser exibido
na "div" de "id" "resultado".
13. A execução da função deverá ocorrer com um evento de click no botão "CALCULAR";
 Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

5. Aquisição de um dos editores de código sugeridos nesse documento

6. Criação do arquivo HTML;
7. Codificação das “tag” básicas da HTML no documento criado;
8. Codificação do formulário e de seus elementos;
9. Criação do algoritmo JavaScript;
10. Associação da função JavScript ao botão do formulário através de um evento de click do
mouse.

RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Um arquivo de extensão “.html” que possua um formulário que permita a digitação de dois
valores numéricos a escolha de um operador aritmético e um botão que quando clicado executa
um algoritmo JavaScript capaz de capturar do formulário os dois valores numéricos digitados o
operador aritmético escolhido, realizar a operação aritmética escolhe e exibir o resultado na
tela.
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas

Digite aqui
Roteiro de aula prática

Disciplina: Programação Web

Unidade: 3

Aula: U3A2

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

1. Desenvolver uma interface frontend simples utilizando HTML com elementos de formulário
a serem manipulados pela linguagem JavaScript.

2. Desenvolver um algoritmo JavaScript capaz de manipular os elementos HTML tratando

um vento de click de mouse, recebendo dados digitados e selecionados, verificando e
convertendo esses dados e realizando cálculos de acordo com a operação matemática
selecionada pelo usuário e por fim exibir o resultado. Cada operação matemática deverá
ser isolada em uma função que deverá ser chamada dentro do arquivo HTML.

3. Testar a aplicação desenvolvida e analisar os resultados, inclusive possíveis erros de

programação buscando a correção desses sempre que necessário.

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e JavaScript, podendo
ser NotePad ++, VSCode.

SOFTWARE

• NotePad ++: https://notepad-plus-plus.org/downloads/

• VSCode: https://code.visualstudio.com/download

Software (X) Acesso online ( )

Em caso afirmativo, qual? NotePad ++, VSCode.

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE

Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

PROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver um formulário HTML que permite ao usuário informar dois valores numéricos e
escolher um operador matemático (soma, subtração, multiplicação ou divisão), clicar em um
botão e receber o resultado na mesma tela. Para realizar a captura dos valores digitados e do o
operador informado deverá ser desenvolvido na mesma página HTML do formulário de um
algoritmo JavaScript. Quanto a realização dos cálculos e exibição do resultado desses cálculos,
deverá ser criado um arquivo JavaScript “.js” a parte que deverá ter uma função para cada
operação aritmética. Esse arquivo deve ser importado na página HTML e cada função deve ser
chamada de acordo com a operação aritmética escolhida no formulário. As funções devem ser
capazes de realizar os cálculos com os valores informados e exibir o resultado na página HTML.
Procedimentos para a realização da atividade:
Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.
 8. Utilizando o editor de código escolhido crie um documento HTML e salve esse como
"calculadora.html";
9. Crie uma estrutura básica HTML;
10. No corpo do documento HTML tag "body" crie um formulário tag "form";
11. Com uso da HTML deverá ser desenvolvida no formulário, ilustrada abaixo:

Seguindo a imagem do formulário fornecido nessa descrição crie:

12. Um rótulo tag "label" que deve exibir no navegador a palavra "NUMERO 1" esse label
deve estar associado a primeira caixa de texto propriedade "for";
13. Crie um caixa de texto tag "input" do tipo numero propriedade "type" e com as
propriedades "name" e "id" como "numero1";
14. Crie um elemento de seleção tag "select" com as opçoes tag "option" de "+", "-", "*" e "/"
representando as quatro operaçõe aritiméticas;
15. Um rótulo tag "label" que deve exibir no navegador a palavra "NUMERO 2" esse label
deve estar associado a primeira caixa de texto propriedade "for";
16. Crie um caixa de texto tag "input" do tipo numero propriedade "type" e com as
propriedades "name" e "id" como "numero2";
17. Crie um botão tag "button" com a propriedade "type" definido o tipo de botão "submit",
esse botão deve exibir a palavra "CALCULAR";
18. Crie uma "div" com a propriedade "name" definida como "resultado.

JavaScript:

14. Cria um arquivo nomesdo como “funcoes.js”;

15. O arquivo “funcoes.js” deve posssuir quatro (4) funções nomeadas como: “somar”,
“subtrair”, “multiplicar” e “dividir” e cada função deve ser capaz de receber dois valores
numericos, executar a operação aritimetica proposta e exibir o resultado na página
HTML "calculadora.html";
16. Na pagina HTML "calculadora.html" com o uso da tag “script” faça a importação do
arquivo “funcoes.js”;
17. Na tag "head" da HTML defina uma área para codificação JavaScript tag "script";
18. Nessa área definida para codificação JavaScript crie uma função nomeada como
“calcular”;
19. A função “calcular” devera ser capaz de realizar a seguintes tarefas:
 a. Receber o valor do campo de texto que recebe o primeiro numero e converter
esse dado para o tipo float;
b. Receber o valor do campo de texto que recebe o segundo numero e converter
esse dado para o tipo float;
c. Receber o operador aritimetico selecionado na caixa de seleção;
d. Verificar qual operdor foi escolhido com o uso de uma sequencia estruturas de
decisão "if" ou uma estrutura de seleção "switch...case";
e. Após a indetificação do operador aritmético deverá ser realizada a chamada da
função responsavel pela operação aritmética ecolhida.
20. A execução da função “calcular” deverá ocorrer com um evento de click no botão
"CALCULAR";

Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

11. Aquisição de um dos editores de código sugeridos nesse documento

12. Criação do arquivo HTML "calculadora.html";
13. Codificação das “tag” básicas da HTML no documento criado;
14. Codificação do formulário e de seus elementos;
15. Criação do arquivo “funções.js” e codificação das funções “somar”, “subtrair”,
“multiplicar” e “dividir”;
16. Importação do arquivo “funções.js” no arquivo “calculadora.html”
17. Criação da função “calcular no arquivo e codificação de sua funcionalidade;
18. Associação da função JavaScript “calcular” ao botão do formulário através de um
evento de click do mouse.

RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Um arquivo de extensão “.html” que possua um formulário que permita a digitação de dois
valores numéricos a escolha de um operador aritmético e um botão que quando clicado executa
 um algoritmo JavaScript capaz de capturar do formulário os dois valores numéricos digitados o
operador aritmético escolhido e realizar a chamada de funções externas codificadas em um
arquivo separado. Codificar um arquivo JavaScript com funções capazes de receber dois
valores numéricos e realizar operações aritméticas com esses valores e após esse cálculo
exibir o resultado em um elemento HTML.
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas

Digite aqui
Roteiro de aula prática

Disciplina: Programação Web

Unidade: 3

Aula: U3A3

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

1. Instalar, configurar e testar o ambiente necessário para a execução do NodeJS;

2. Desenvolver uma aplicação utilizando NODEJS capaz de executar as quatros operações

básicas da aritmética "soma", "subtração", "multiplicação" e "divisão". A aplicação será
executada diretamente via terminal com o uso do comando "node" sem haver a
necessidade de aceitar requisições HTPP. Após a execução a aplicação deverá ler duas
variáveis contendo dois valores numéricos definidos no próprio código. Cada operação
matemática deverá ser criada em um arquivo ".js" que deverão ser importados como
módulo em arquivo principal da aplicação.

3. Testar a aplicação desenvolvida e analisar os resultados, inclusive possíveis erros de

programação buscando a correção desses sempre que necessário.

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e JavaScript, podendo
ser NotePad ++, VSCode, NodeJS;

SOFTWARE
 • NotePad ++: https://notepad-plus-plus.org/downloads/
• VSCode: https://code.visualstudio.com/download
• NodeJS: https://nodejs.org/en/download/current/

Software (X) Acesso online ( )

Em caso afirmativo, qual? NotePad ++, VSCode, e NodeJS.

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE

Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

• NodeJS: É um ambiente de execução JavaScript server-side baseado no interpretador de

JavaScript V8 criado pelo Google e utilizado no navegador Google Chrome;

PROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver uma aplicação com uso do NodeJS capaz de realizar as quatro operações
aritméticas básicas.
Procedimentos para a realização da atividade:
Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.

21. Instale o editor de código de sua preferencia, pode usar um dos sugeridos;
22. Instale o NodeJs;
23. Crie quatro arquivos que vão representar as quatro operações aritméticas, sendo esses:
a. somar.js -> esse arquivo deve conter uma função capaz de receber dois valores
numéricos, realizar a soma desses valores e retornar o resultado da soma;
b. subtrair.js -> esse arquivo deve conter uma função capaz de receber dois valores
numéricos, realizar a subtração desses valores e retornar o resultado da soma;
c. multiplicar.js -> esse arquivo deve conter uma função capaz de receber dois
valores numéricos, realizar a multiplicação desses valores e retornar o resultado
da soma;
d. dividir.js -> esse arquivo deve conter uma função capaz de receber dois valores
numéricos, realizar a divisão desses valores e retornar o resultado da soma;
24. Cria um arquivo chamado “app.js” é esse arquivo que será executado via terminal com o
uso do comando “node” e fará a aplicação funcionar, para tal:
a. Importe o modulo de soma, arquivo “soma.js”;
b. Importe o modulo de subtração, arquivo “subtrair.js”;
c. Importe o modulo de multiplicação, arquivo “multiplicar.js”;
d. Importe o modulo de divisão, arquivo “dividir.js”;
25. Declare as duas variáveis e atribua a essas valores numéricos;
26. Dentro de um comando “console.log” faça a chamada para o modulo de soma importado
anteriormente chamando a função de soma e passando para essa como parâmetro as
variáveis com os valores numéricos.
27. Execute o arquivo “app.js” pelo terminal com o comando “node”.

Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

19. Download e instalação de um dos editores de código sugeridos nesse documento;

20. Download e instalação do NodeJS;
21. Criação do arquivo “.js” "somar.js"
22. Criação da função “somar” no arquivo “.js” "soma.js";
23. Criação do arquivo “.js” "subtrair.js"
 24. Criação da função “subtrair” no arquivo “.js” "subtrair.js";
25. Criação do arquivo “.js” "multiplicar.js"
26. Criação da função “multiplicar” no arquivo “.js” "multiplicar.js";
27. Criação do arquivo “.js” "dividir.js"
28. Criação da função “dividir” no arquivo “.js” "dividir.js";
29. Criação do arquivo “app.js”;
30. Importação dos módulos de soma, subtração, multiplicação e divisão no arquivo “app.js”;
31. Declaração e atribuição dos valores de duas variáveis no arquivo “app.js”;
32. Chamada de cada função de cada módulo (soma, subtração, multiplicação e divisão) e
passagem dos valores numéricos das variáveis dentro de um comando “console.log”;
33. Execução da aplicação pelo terminal com uso do comando “node”;

RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Ao final da atividade deverá ser entregue em uma pasta os arquivos “app.js”, “somar.js”,
“subtrair.js”, “multiplicar.js” e “dividir.js”, onde cada um desses arquivos deve estar devidamente
codificado e realizando as tarefas descritas na atividade
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas

Digite aqui
Roteiro de aula prática

Disciplina: Programação Web

Unidade: 4

Aula: U4A1

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

1. Desenvolver uma interface frontend simples utilizando HTML com elementos de formulário
a serem para captação de dados que serão processados por um script PHP.

2. Desenvolver um algoritmo PHP capaz de capturar e processar dados digitados e

selecionados em um formulário, após a captura desses dados deverá ser realizado
cálculos de acordo com a operação matemática selecionada pelo usuário e por fim exibir
o resultado.

3. Testar a aplicação desenvolvida e analisar os resultados, inclusive possíveis erros de

programação buscando a correção desses sempre que necessário.

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e JavaScript, podendo
ser NotePad ++, VSCode, Sublime, Atom ou similar;
• XAMPP ou WAMPServer
SOFTWARE

• NotePad ++: https://notepad-plus-plus.org/downloads/

• VSCode: https://code.visualstudio.com/download
• XAMPP: https://www.apachefriends.org/pt_br/download.html
• WAMPServer: https://www.wampserver.com/en/

Software (X) Acesso online ( )

NotePad ++, VSCode, XAMPP ou

Em caso afirmativo, qual?
WAMPServer.

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE

Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

• XAMPP: É um instalador de ambiente de programa web que instala e configura um

servidor web (Apache), a linguagem PHP e um sistema gerenciador de banco de dados
relaciona (MySQL).

• WAMPServer: É um instalador de ambiente de programa web que instala e configura um

servidor web (Apache), a linguagem PHP e um sistema gerenciador de banco de dados
relaciona (MySQL).

ROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver um formulário HTML que permite ao usuário informar dois valores numéricos e
escolher um operador matemático (soma, subtração, multiplicação ou divisão), clicar em um
botão enviado os dados por “POST” para um script PHP que recebera os valores numéricos e o
operador aritmético escolhido e fará o calculo desejado.

Procedimentos para a realização da atividade:

Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.

12. Utilizando o editor de código escolhido crie um documento HTML e salve esse como
"calculadora.html";
13. Crie uma estrutura básica HTML;
14. No corpo do documento HTML tag "body" crie um formulário tag "form" com a
propriedade “action” apontando para um arquivo “calcular.php” e a propriedade “method”
como “POST”;
15. Com uso da HTML deverá ser desenvolvida no formulário, ilustrada abaixo:

Seguindo a imagem do formulário fornecido nessa descrição crie:

19. Um rótulo tag "label" que deve exibir no navegador a palavra "NUMERO 1" esse label
deve estar associado a primeira caixa de texto propriedade "for";
20. Crie um caixa de texto tag "input" do tipo numero propriedade "type" e com as
propriedades "id" e "name" como "numero1";
21. Crie um elemento de seleção tag "select" com as opçoes tag "option" de "+", "-", "*" e "/"
representando as quatro operaçõe aritiméticas com a propriedade “name” e “id” como
“operador”;
22. Um rótulo tag "label" que deve exibir no navegador a palavra "NUMERO 2" esse label
deve estar associado a primeira caixa de texto propriedade "for";
23. Crie um caixa de texto tag "input" do tipo numero propriedade "type" e com as
propriedades "name" e "id" como "numero2";
24. Crie um botão tag "button" com a propriedade "type" definido o tipo de botão "submit",
esse botão deve exibir a palavra "CALCULAR";
PHP:

28. Criar uma rquivo nomeado como “calcualr.php”;

29. Criar uma variável nomeada como “numero1” que recebe o valor numerico enviado pelo
formulário com uso de POST;
30. Criar uma variável nomeada como “numero2” que recebe o valor numerico enviado pelo
formulário com uso de POST;
31. Criar uma variável nomeada como “operador” que recebe o valor do operador aritimético
enviado pelo formulário com uso de POST;
32. Criar uma bateria de estruturas de decisão “if” que verifica o operador informado no
formulário ou uma estrutura de seleção “switch...case” que realiza a mesma tarefa;
33. Ao identificar a operação aritmética selecionada realizar o cálculo devido de acordo com
a escolha e exibir seu resultado na tela;
Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

34. Download e instalação de um dos editores de código sugeridos nesse documento;

35. Download e instalação do XAMPP ou WAMPServer;
36. Na pasta raiz do XAMPP ou WAMPServer criar o arquivo HTML;
37. Codificação das “tag” básicas da HTML no documento criado;
38. Codificação do formulário e de seus elementos;
39. Criação do script PHP na pasta raiz do XAMPP ou WAMPServer;
40. Codificação do algoritmo PHP que implemente as funcionalidades propostas;
41. Execute a aplicação e teste as funcionalidades que devem estar funcionando
corretamente conforme as especificações informadas nesse documento;

RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Um arquivo de extensão “.html” que possua um formulário que permita a digitação de dois
valores numéricos a escolha de um operador aritmético e um botão que quando clicado envia
os dados para o arquivo PHP que realiza as funcionalidades propostas.
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas

Digite aqui
Roteiro de aula prática

Disciplina: Programação Web

Unidade: 4

Aula: U4A2

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

1. Desenvolver interface HTML;

2. Desenvolver formulário HTML capaz de enviar dados de texto para um script PHP;
3. Desenvolver um script PHP capaz de receber dados de texto de um formulário HTML e
gravar esses dados de texto em um arquivo “dados.txt”.

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e JavaScript, podendo
ser NotePad ++, VSCode,
• XAMPP ou WAMPServer

SOFTWARE

• NotePad ++: https://notepad-plus-plus.org/downloads/

• VSCode: https://code.visualstudio.com/download
• XAMPP: https://www.apachefriends.org/pt_br/download.html
• WAMPServer: https://www.wampserver.com/en/

Software (X) Acesso online ( )

NotePad ++, VSCode, XAMPP ou

Em caso afirmativo, qual?
WAMPServer.

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE

Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

• XAMPP: É um instalador de ambiente de programa web que instala e configura um

servidor web (Apache), a linguagem PHP e um sistema gerenciador de banco de dados
relaciona (MySQL).

• WAMPServer: É um instalador de ambiente de programa web que instala e configura um

servidor web (Apache), a linguagem PHP e um sistema gerenciador de banco de dados
relaciona (MySQL).

PROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver um formulário HTML que permite ao usuário informar dados de texto em uma área
de texto ao clicar em um botão os dados devem ser enviados por “POST” para um script PHP
que recebera os dados de texto e os grava em um arquivo chamado “dados.txt”, caso o arquivo
ainda não exista deverá ser criado pelo PHP.
Procedimentos para a realização da atividade:
Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.

16. Utilizando o editor de código escolhido crie um documento HTML e salve esse como
"calculadora.html" na pasta raiz do XAMPP ou WAMPServer;
17. Crie uma estrutura básica HTML;
18. No corpo do documento HTML tag "body" crie um formulário tag "form" com a
propriedade “action” apontando para um arquivo “arquivo.php” e a propriedade “method”
como “POST”;
19. Com uso da HTML deverá ser desenvolvida no formulário, ilustrada abaixo:

Seguindo a imagem do formulário fornecido nessa descrição crie:

25. Um rótulo tag "label" que deve exibir no navegador os dizeres "DIGITE SEU TEXTO
AQUI:" esse label deve estar associado a uma área de texto propriedade "for";
26. Crie uma área de texto com “id” e “name” nomeados como “txt_texto”;
27. Crie um botão tag "button" com a propriedade "type" definido o tipo de botão "submit",
esse botão deve exibir a palavra "CALCULAR";

PHP:

34. Criar uma arquivo nomeado como “arquivo.php”;

35. Criar uma variável nmomeada como “dados” que recebe o texto digitado na área de
texto do formulário HTML com uso de POST;
36. Após receber esses dados deverá ser implementado código que cria o arquivos
“dados.txt” caso esse não exista e grave os dados de texto recebidos;
 Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

42. Download e instalação de um dos editores de código sugeridos nesse documento;

43. Download e instalação do XAMPP ou WAMPServer;
44. Na pasta raiz do XAMPP ou WAMPServer criar o arquivo HTML;
45. Codificação das “tag” básicas da HTML no documento criado;
46. Codificação do formulário e de seus elementos;
47. Criação do script PHP na pasta raiz do XAMPP ou WAMPServer;
48. Codificação do algoritmo PHP que implemente as funcionalidades propostas.
49. Execute a aplicação e teste as funcionalidades que devem estar funcionando
corretamente conforme as especificações informadas nesse documento;

RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Um arquivo de extensão “.html” que possua um formulário que permita a digitação do texto e
envie os dados para o arquivo PHP que realiza as funcionalidades propostas.
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas
Digite aqui
Roteiro de aula prática

Disciplina: Programação Web

Unidade: 4

Aula: U4A3

OBJETIVOS

Descreva, em tópicos, entre três e cinco, os objetivos da aula prática. Liste cada objetivo iniciando por um
verbo no infinitivo. Por exemplo: compreender, conhecer, analisar, aplicar, desenvolver, etc.

4. Desenvolver um banco de dados (alunocadastro) com uma tabela (tbl_aluno) capaz de

armazenar dados de nome, email, telefone e idade;
5. Desenvolver uma classe PHP capaz de se conectar ao banco de dados “alunocadastro”
através do módulo de conexão a banco de dados do PHP o PDO;
6. Criar uma arquivo de teste que deverá utilizar a classe de conexão PHP e realizar um
teste de inserção de dados na tabela “tbl_aluno” do banco de dados “alunocadastro” ;

INFRAESTRUTURA

Indique os tipos de instalações que deverão ser utilizadas, por exemplo, configuração do dispositivo,
velocidade da internet, espaço de armazenamento, etc.

• Computador;
• Software de ambiente de desenvolvimento para codificação HTML e JavaScript, podendo
ser NotePad ++, VSCode, XAMPP ou WAMPServer

SOFTWARE

• NotePad ++: https://notepad-plus-plus.org/downloads/

• VSCode: https://code.visualstudio.com/download
• XAMPP: https://www.apachefriends.org/pt_br/download.html
• WAMPServer: https://www.wampserver.com/en/

Software (X) Acesso online ( )

NotePad ++, VSCode, XAMPP ou

Em caso afirmativo, qual?
WAMPServer.

Pago ( ) Não Pago (X)

Tipo de licença: Open source ou gratuito.

DESCRIÇÃO DO SOFTWARE

Descreva as características técnicas do software mostrando sua função na realização da atividade.

• NotePad ++: É um editor de código simples capaz de trabalhar com diversas linguagens
de programação.

• VSCode: É um editor de código simples capaz de trabalhar com diversas linguagens de

programação. Conta com diversos recursos de codificação que podem ser instalados a
parte e auxiliam na produção.

• XAMPP: É um instalador de ambiente de programa web que instala e configura um

servidor web (Apache), a linguagem PHP e um sistema gerenciador de banco de dados
relaciona (MySQL).

• WAMPServer: É um instalador de ambiente de programa web que instala e configura um

servidor web (Apache), a linguagem PHP e um sistema gerenciador de banco de dados
relaciona (MySQL).

PROCEDIMENTO/ATIVIDADE

Atividade proposta:
Indique de forma objetiva a atividade proposta para a aula prática. Por exemplo: análise de diferentes
estruturas celulares em laminaria, execução de um código que faça uma busca automática numa base de
dados, análise histológica de tecido, desenho que aplique técnicas específicas, desenvolvimento de
projetos, etc.

Desenvolver um banco de dados contento uma tabela para teste, desenvolver uma classe de
conexão utilizando a linguagem PHP que seja capaz de se conectar a um banco de dados
através do módulo de conexão do PHP o PDO e por fim realizar um teste abrindo a conexão
como banco de dados e realizar uma inserção de dados na tabela.

Procedimentos para a realização da atividade:

Utilize este campo para descrever, de forma detalhada, as etapas a serem desenvolvidas para a realização
da atividade. Lembre-se de que esta é uma oportunidade de o aluno colocar em prática os conteúdos
trabalhados no livro didático para o futuro exercício da profissão.

PHP:
37. Criar umbanco de dados com o nome de “cadastroaluno”;
38. Criar uma tabela com o nome de “tbl_aluno”, essa tabela deverá ter a estrura descrita
abaixo:
a. cod_aluno -> campo do tipo numerico com auto incremento e chave primária;
b. nome -> campo do tipo texto de até 500 caracteres e não nulo;
c. sobrenome -> campo do tipo texto de até 500 caracteres e não nulo;
d. idade -> campo do tipo NUMERICO COM A TÉ DEZ (10) algarismos caracteres e
não nulo;
e. telefone -> campo do tipo texto de até 20 caracteres e não nulo;
f. email -> campo do tipo texto de até 500 caracteres e não nulo;
39. Criar uma classe capaz de se conecta com o banco de dados descrito acima utilizando o
módulo de conexão dp PHP o PDO;
40. Criar um arquivo nomeado como “index.php” que deverá testar a classe de conexão
rrealizando a conexão com o banco de dados e um inserção de dados na tabela;
41. Executar a aplicação e contatar que os resultados alcançados foram os esperados.

Checklist:
Escreva aqui, em tópicos, as principais etapas a serem desenvolvidas na aula prática, na sequência em
que elas devem ser realizadas. Esse checklist é um importante instrumento para que o professor e seus
alunos possam conferir se executaram todos os procedimentos descritos para a atividade.

50. Download e instalação de um dos editores de código sugeridos nesse documento;

51. Download e instalação do XAMPP ou WAMPServer;
52. Na pasta raiz do XAMPP ou WAMPServer criar o arquivo HTML;
53. Codificação das “tag” básicas da HTML no documento criado;
54. Codificação do formulário e de seus elementos;
55. Criação do script PHP na pasta raiz do XAMPP ou WAMPServer;
56. Codificação do algoritmo PHP que implemente as funcionalidades propostas.
57. Execute a aplicação e teste as funcionalidades que devem estar funcionando
corretamente conforme as especificações informadas nesse documento;
 RESULTADOS

Resultados da aula prática:

Este é o momento para ser verificado o nível de aprendizagem de todos os alunos após a aula prática.
Defina o que deverá ser entregue como resultado da prática realizada em aula e de que forma. A entrega
pode ser um plano de aula, um relatório, uma análise de dados, uma obra de arte, uma resenha, etc.

Um arquivo de extensão “.html” que possua um formulário que permita a digitação do texto e
envia os dados para o arquivo PHP que realiza as funcionalidades propostas.
Asasasasas

Referências

Escreva, a seguir, as referências utilizadas na seção (em padrão ABNT – NBR 6023/2018).
Para construí-las, pode usar o site https://view.genial.ly/5f7b4f4996b3860d102d90c0
Asasasasas

Digite aqui