Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
gabarito_Programação para Web I
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
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>
Continue navegando
Materiais relacionados
15 pág.
352 pág.
39 pág.
118 pág.
Perguntas relacionadas
Compartilhar