Questões resolvidas
Em seu Hello World, implemente um link denominado ‘Lista de Compras’, direcionando para a página que você implementou na questão 1.
Utilizando CSS, faça com que a cor do texto do link criado na questão 3 seja verde, e que o mesmo apareça alinhado à direita (crie um arquivo de CSS separado da página).
Agora que temos o XAMPP instalado, é hora de explorá-lo:
Crie um novo diretório chamado ‘helloworld’ (sem aspas) abaixo do diretório htdocs.
Crie uma página PHP que declare um array, e que cada elemento do array corresponda a uma letra da palavra UNIASSELVI.
Em seguida, imprima o valor do array, separado por linhas e indicando o índice da posição que está sendo imprimida.
Na tabela pessoa, criada ao longo dos exemplos anteriores, insira um registro com as suas informações pessoais.
Insira mais um registro com informações pessoais referentes a algum familiar próximo (namorado(a), pai, mãe).
Através de um script JavaScript, obtenha o texto do parágrafo, que deve conter apenas o seu nome.
Se a quantidade de letras do seu nome (obtido de dentro do parágrafo através de acesso via DOM, na questão anterior) for um número par, exiba um alerta com o texto “Par”, senão exiba um alerta com o texto “Ímpar”.
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
das
A
Gabarito
utoatividades
PROGRAMAÇÃO PARA WEB I
Centro Universitário Leonardo da Vinci
Rodovia , nº .BR 470 Km 71, 1 040
Bairro Benedito - CEP 89130-000
I daialn - Santa Catarina - 47 3281-9000
Elaboração:
Revisão, Diagramação e Produção:
Centro Universitário Leonardo da Vinci - UNIASSELVI
2017
Prof. Laércio Metzner
3UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
GABARITO DAS AUTOATIVIDADES DE
PROGRAMAÇÃO PARA WEB I
Centro Universitário Leonardo da Vinci
Rodovia , nº .BR 470 Km 71, 1 040
Bairro Benedito - CEP 89130-000
I daialn - Santa Catarina - 47 3281-9000
Elaboração:
Revisão, Diagramação e Produção:
Centro Universitário Leonardo da Vinci - UNIASSELVI
2017
UNIDADE 1
TÓPICO 1
Explore as tags HTML.
1 Implemente uma página Web para exibir uma lista de compras. Utilize
uma lista não ordenada.
Arquivo listacompras.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Lista de compras</title>
</head>
<body>
<ul>
<li>Achocolatado em pó</li>
<li>Batata palha</li>
<li>Refrigerante</li>
<li>Cerveja</li>
<li>Vodka</li>
<li>Limões</li>
</ul>
</body>
</html>
2 Implemente uma página Web para exibir uma lista de atividades a
cumprir (to do list). Utilize uma lista ordenada.
4 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
Arquivo todolist.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Minha to do list de hoje !</title>
</head>
<body>
<ol>
<li>Fazer a autoatividade de programação Web
I (Legal)</li>
<li>Estudar para as demais disciplinas
chatas</li>
<li>Limpar o quarto</li>
<li>Recuperar as horas da saída antecipada de
sexta (trabalho...)</li>
<li>Tomar uma cerva com os amigos</li>
<li>Ir para a faculdade (programação Web I
muito show!!! :D~ )</li>
</ol>
</body>
</html>
3 Em seu Hello World, implemente um link denominado ‘Lista de
Compras’, direcionando para a página que você implementou na
questão 1.
Arquivo helloworld.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.
css">
5UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
<title>Hello World</title>
</head>
<body>
<p>
Hello World
</p>
<p id="compras">
<a id="comprasLink" href="listacompras.html"
>Lista de compras</a>
</p>
</body>
</html>
4 Utilizando CSS, faça com que a cor do texto do link criado na questão 3
seja verde, e que o mesmo apareça alinhado à direita (crie um arquivo
de CSS separado da página).
Arquivo styles.css
#compras {
text-align: right;
}
#comprasLink {
color:green;
}
TÓPICO 2
Agora que temos o XAMPP instalado, é hora de explorá-lo:
1 Crie um novo diretório chamado ‘helloworld’ (sem aspas) abaixo do
diretório htdocs.
R.: Observe, na figura abaixo, que o File Manager (janela da esquerda) indica
que o diretório helloworld foi criado dentro do diretório /opt/lampp/htdocs/.
2 Dentro do diretório helloworld cole o arquivo helloworld.html que
você criou durante seus estudos no Tópico 1.
6 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
R.: Observe, na figura abaixo, que os arquivos helloworld.html e styles.css
estão dentro do diretório helloworld.
3 Inicie o XAMPP.
R.: Observe, na figura abaixo, que há um terminal no qual foi iniciado o XAMPP
através do comando sudo /opt/lampp/lampp start.
4 Abra seu Browser e acesse a URL <http://localhost:80/helloworld/
helloworld.html>.
R.: Observe, na figura abaixo, que há um browser (janela da direita) o qual está
exibindo a página da URL <http://localhost:80/helloworld/helloworld.html>.
7UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
5 Edite a página helloworld.html que você copiou para dentro do
diretório htdocs com o editor de texto e implemente algo novo nela.
R.: Veja, na figura abaixo, que alteramos o arquivo helloworld.html e
adicionamos um cabeçalho com o texto 'Seja bem-vindo ao desenvolvimento
Web !!'
6 Para visualizar as alterações é necessário somente atualizar a guia
do seu navegador na qual você acessou a URL <http://localhost:80/
helloworld/helloworld.html> (pressionar a tecla F5).
R.: Observe, na figura abaixo, que há um browser (janela da direita) o qual
está exibindo a página da URL <http://localhost:80/helloworld/helloworld.
html>. Leve em consideração que a página já foi atualizada, pois exibe o
cabeçalho que adicionamos ao conteúdo HTML.
7 Não se esqueça de, quando terminar, finalizar o XAMPP.
R.: Caso o aluno não queira mais fazer alterações no arquivo helloworld.
html, ele pode terminar a execução do XAMPP utilizando o comando /opt/
lampp/lampp stop.
8 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
A figura mostra alterações sendo feitas no arquivo helloworld.html e a página
Hello World já atualizada.
9UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
TÓPICO 3
1 Crie uma página PHP que declare um array, e que cada elemento do
array corresponda a uma letra da palavra UNIASSELVI. Em seguida,
imprima o valor do array, separado por linhas e indicando o índice
da posição que está sendo imprimida. A página deve apresentar um
conteúdo semelhante ao abaixo:
0: U
1: N
2: I
3: A
4: S
5: S
6: E
7: L
8: V
9: I
R.:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Autoatividade</title>
</head>
<body>
<ul>
<?php
$arrayUniasselvi = Array ("U", "N", "I",
"A", "S", "S", "E", "L", "V", "I");
foreach ($arrayUniasselvi as $indice =>
$valor) {
?>
<li>
<?
10 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
echo $indice.": ".$valor;
?>
</li>
<?
}
?>
</ul>
</body>
</html>
UNIDADE 2
TÓPICO 1
1 Na tabela pessoa, criada ao longo dos exemplos anteriores, insira
um registro com as suas informações pessoais.
R.:
insert into pessoa ( cpf
, nome
, rg
, datanascimento)
values ( '07239502835'
, 'Laercio Metzner'
, '4905976'
, '1990-10-07')
2 Insira mais um registro com informações pessoais referentes a algum
familiar próximo (namorado(a), pai, mãe).
R.: insert into pessoa ( cpf
, nome
, rg
, datanascimento)
values ( '88739502675'
, 'Andressa Geisler'
11UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
, '4005966'
, '1991-05-16')
3 Implemente uma query para obter somente as informações pessoais
referentes ao seu familiar.
R.: SELECT *
FROM pessoa
WHERE cpf = '88739502675'
4 Implemente uma query para obter todas as informações da tabela
pessoa.
R.: SELECT *
FROM pessoa
5 Exclua o registro referente as suas informações pessoais.
R.: DELETE
FROM pessoa
WHERE cpf = '07239502835'
TÓPICO 2
1 Crie uma página Web com um parágrafo que tenha um id, dentro do
parágrafo coloque apenas seu nome (parágrafos são declarados em
HTML através da tag <p>).
2 Através de um script JavaScript, obtenha o texto do parágrafo, que
deve conter apenas o seu nome.
3 Se a quantidade de letras do seu nome (obtido de dentro do parágrafo
através de acesso via DOM, naquestão anterior) for um número par,
exiba um alerta com o texto “Par”, senão exiba um alerta com o texto
“Ímpar”
OBS.: Consulte a listagem 35 em caso de dúvidas.
12 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
TÓPICO 3
1 Você participaria de algum projeto Open Source? Qual?
R.: Além de termos a liberdade de criar qualquer projeto open source que
quisermos, utilizando plataformas para divulgação como o GitHub, podemos
participar de projetos existentes. Podemos, por exemplo, participar da
Resposta (uma para as três questões):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Autoatividade</title>
</head>
<body>
<!-- Questão 1, um parágrafo com id -->
<p id="nome">UNIASSELVI</p>
<script type="text/javascript">
// Questão 2: Obtendo o texto do
parágrafo
// através do id em JavaScript
var nome = document.getElementById("nome").
innerHTML;
// Questão 3: Exibe se a quantidade
de caracteres
// do nome é par ou ímpar
var comprimento = nome.length;
var par = (comprimento % 2) == 0;
if (par){
alert("par");
} else {
alert("impar");
}
</script>
</body>
</html>
13UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
implementação de uma JSR do Java, ou participar do desenvolvimento de
uma rom Android (Cyanogen, Omni etc.). Podemos participar de projetos
como o Moodle, o Wordpress etc. Podemos até mesmo ajudar a desenvolver
o sistema operacional Ubuntu.
2 O que lhe motivaria a participar de um projeto Open Source?
R.: A participação em um projeto open source deve ser motivada pela busca
por conhecimento e crescimento.
3 E quando outras pessoas começarem a fazer dinheiro usando seu
projeto Open Source, você se sentiria bem ou mal?
R.: Um dos grandes objetivos de um projeto open source, é que o software
se torne famoso. Deste ponto de vista, é importantíssimo que as pessoas
vejam seu projeto como lucrativo. Normalmente, quando alguém consegue
obter lucro utilizando projetos gratuitos e abertos, elas buscam efetuar uma
doação para a equipe responsável pelo projeto. Uma das formas de ganhar
dinheiro com projetos open source, é com a implantação de seu software
em grandes Corporações.
UNIDADE 3
TÓPICO 1
1 Utilizando seu browser, faça novos testes na API. Através do método
GET faça pelo menos uma:
a) Requisição sem parâmetros.
b) Requisição do parâmetro ID.
c) Requisição com o parâmetro Status.
d) Requisição com algum parâmetro que não seja id nem status, e
descreva o que acontece.
R.:
14 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
a)<http://localhost:80/listadehabitos-rest-api/habito.php/>
b)<http://localhost/listadehabitos-rest-api/habito.php?id=50>
c) <http://localhost/listadehabitos-rest-api/habito.php?status=nada>
d) <http://localhost/listadehabitos-rest-api/habito.php?op=I>, esta operação
resulta no erro "Notice: Trying to get property of non-object in /opt/lampp/
htdocs/listadehabitos-rest-api/habito.php on line 87 []">.
TÓPICO 2
1 Encontre, na documentação do Bootstrap, ou da W3C, um exemplo de
utilização do navbar e implemente-o em uma página web.
R.:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Navbar</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.
com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/
bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="main jumbotron">
<h1>Autoatividade tópico 2</h1>
</div>
15UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
</body>
</html>
TÓPICO 3
1 Desenvolva uma aplicação web utilizando AngularJS e Bootstrap
que permita ao usuário cadastrar uma lista de compras (somente em
memória, não necessita de Banco de Dados!).
R.:
Estrutura de diretórios:
listadecompras
├── css
│ └── app.css
├── index.html
├── js
│ └── app.js
└── lib
├── angularjs
│ └── angular.min.js
└── bootstrap
├── bootstrap.min.css
└── bootstrap.min.js
app.js:
var app = angular.module("app", []);
app.controller("listadecompra", ["$scope", function($scope)
{
$scope.itens = [];
$scope.item = "";
$scope.adicionarAlista = function(){
$scope.itens[$scope.itens.length] = $scope.item;
$scope.item = "";
}
$scope.removerDaLista = function(item){
$scope.itens.splice($scope.itens.indexOf(item), 1);
}
16 GABARITO DAS AUTOATIVIDADES UNIASSELVI
NEAD
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
}]);
app.css:
.main {
width: 350px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
text-align: center;
}
body {
background-color: #C7E123
}
th {
text-align: center;
}
a {
color: #7C6B6B
}
index.html:
<html lang="pt-br" ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="lib/
bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/app.
css">
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angularjs/angular.min.js"></script>
<script src="js/app.js"></script>
<title>Compras</title>
</head>
<body ng-controller="listadecompra">
<div class="main jumbotron">
<h1>Compras</h1>
<p><input type="text" ng-model="item" /></p>
<p><button ng-click="adicionarAlista()" class="btn
btn-primary">Adicionar</button></p>
17UNIASSELVI
NEAD
GABARITO DAS AUTOATIVIDADES
P
R
O
G
R
A
M
A
Ç
Ã
O
P
A
R
A
W
E
B
I
<table class="table table-striped">
<tbody>
<thead>
<th colspan="2">Itens</th>
</thead>
<tr ng-repeat="it in itens">
<td><button class="btn btn-danger" ng-
click="removerDaLista(it)">-</button></td>
<td>{{it}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Mais conteúdos dessa disciplina
Apostila de construção do tanque do Sisteminha Embrapa- Exame Programação e Web 2024
- MAPA MENTAL 1
- Variáveis Compostas em Python
- Ambientes de Desenvolvimento Python
- diagramaEntidadeRelacionamento
- Trabalho Prático DevOps
- (31)994408961- RESOLVIDO-Aula Pratica Infraestrutura como Codigo (3 Atividades)
- (31)994408961- RESOLVIDO-Aula Pratica Framework para desenvolvimento de software 2
- import random def gerar_numeros_mega_sena(): """Gera um conjunto de 6 números aleatórios entre 1 e 60 (inclusive).""" return sorted(random.sample(rang
- Em relação ao funcionamento correto do trem de engrenagens, indique a alternativa INCORRETA: Questão 10Escolha uma opção: a. Um dos motivos da necessi
- As câmaras dedais são uma opção às câmaras de ionização. Nesse modelo de câmara de ionização, submete-se a irradiação de um volume considerável de ...
- Levando em consideração as técnicas de limpeza de peças utilizando o método convencional através de uma máquina de lavar, analise as afirmativas a seg
- A integração de IoT em sistemas de gestão de inventário pode transformar a forma como as empresas operam. Qual dos seguintes benefícios é mais dire...
- Quais estratégias são recomendadas para a implementação efetiva de um currículo escolar que atenda às necessidades de aprendizagem dos estudantes? Que
- Em relação às características e à aplicação de elementos de fixação nas bielas, indique a alternativa INCORRETA: Questão 1Escolha uma opção: A. Não há
- Os silicones são ativos amplamente utilizados em condicionadores devido à sua capacidade de criar uma película protetora sobre o fio, proporcionando b
- Analise a situação a seguir: Qual o valor mais adequado em um memorando de entendimentos? A rede de postos de gasolinas RB Postos de Combustíveis...
- Com relação ao cliclo de inteligência competitiva. Marque a alternativa INCORRETA. O componente de planejamento busca definir metas de coletas de info
- Observe o diagrama abaixo: De acordo com as informações contidas nesse diagrama, conclui-se que a única afirmação correta é: a) Os comentaristas qu...
- Qual característica distingue a capacidade de conexão de internet de um Data Center em comparação com uma residência comum? Questão 8Resposta a. A exi
- Qual dos princípios a seguir é fundamental para a estrutura de conectividade de um Data Center? Questão 6Resposta a. Contratação de links de diferente
- Implantação de Práticas Integrativas no SUS
- Exercício Avaliativo - Aula 4_ Revisão da tentativa_IntroLGPD