Laboratório de Informática 1 e 2 (2009) » exercícios http://www.brunocampagnolo.com/2009li PUCPR > Bacharelado em Sistemas de Informação > 1o e 2o Períodos Fri, 18 Dec 2009 10:28:56 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Exercício F13 – Layout CSS http://www.brunocampagnolo.com/2009li/2009/11/03/exercicio-f13-layout-css/ http://www.brunocampagnolo.com/2009li/2009/11/03/exercicio-f13-layout-css/#comments Tue, 03 Nov 2009 22:05:10 +0000 admin http://www.brunocampagnolo.com/2009li/?p=636 (entrega máxima até 16/11)

Este exercício está baseado na aula sobre layout CSS e nos exemplos fornecidos na aula referente a este assunto.

1) Faça o download do arquivo a seguir:

Exemplos de layout

2) Este arquivo contém um conjunto de pastas. Em cada pasta há uma imagem que representa um layout a partir da imagem Resposta_1.png. Verifique que esta imagem é diferente em cada pasta e cada pasta possui um código diferente.

3) Escolha um código para resolver seu exercício cuja primeira letra seja igual à primeira letra de seu nome. Por exemplo, se seu nome é Jamanta, você pode escolher a pasta jm ou jv.

4) Recrie o mais próximo possível a interface fornecida na imagem Resposta_1.png. Observe que você deve recriar o formulário ao centro conforme a especificação listada. Cada imagem possui um layout diferente, também está especificado. O menu lateral deve obrigatoriamente, usar a imagem fornecida rollover.png em sua pasta.

IMPORTANTE: você deve formatar, dimensionar e posicionar seus elementos usando CSS. Outras alternativas: tabelas para layout, tags de formatação, etc, serão DESCONSIDERADAS.

Entregue, até 16/11/2009 sua resposta no espaço abaixo.

]]> http://www.brunocampagnolo.com/2009li/2009/11/03/exercicio-f13-layout-css/feed/ 0 Exercício O07 – Posicionamento CSS http://www.brunocampagnolo.com/2009li/2009/10/27/exercicio-o07-posicionamento-css/ http://www.brunocampagnolo.com/2009li/2009/10/27/exercicio-o07-posicionamento-css/#comments Tue, 27 Oct 2009 21:53:39 +0000 admin http://www.brunocampagnolo.com/2009li/?p=590 Este é um exercício que aumentará nas próximas semanas. Segue sua especificação inicial no formato do item O07.

Selecione um site de notícias qualquer / blog ou similar.

Recrie a página inicial deste site apenas usando o que aprendeu na aula sobre posicionamento CSS e seus conhecimentos anteriores.

Em sua interface você deve apresentar:

  • as notícias apresentadas em um elemento central;
  • uma imagem por notícia;
  • um menu lateral, levando a outras páginas deste site;
  • o cabeçalho do site com o nome e caixa de busca (não funcional);
  • o rodapé do site com créditos e data;

Em seu layout, você não deve utilizar outras imagens além da imagem referente à notícia.

]]> http://www.brunocampagnolo.com/2009li/2009/10/27/exercicio-o07-posicionamento-css/feed/ 0 Exercício F12 – Jogo dos 15 (ex 3o bimestre – Prof Henri) http://www.brunocampagnolo.com/2009li/2009/09/30/exercicio-f12-jogo-dos-15-ex-3o-bimestre-prof-henri/ http://www.brunocampagnolo.com/2009li/2009/09/30/exercicio-f12-jogo-dos-15-ex-3o-bimestre-prof-henri/#comments Wed, 30 Sep 2009 19:40:03 +0000 admin http://www.brunocampagnolo.com/2009li/?p=555 Seu objetivo é criar uma interface que permita a interação com o Jogo dos 15.
Este jogo, criado por Sam Loyd em 1872 tem como objetivo a reordenação de um quadrado numérico.

Em sua versão em JavaScript / HTML / CSS pedem-se algumas implementações extra:
* conte o número de movimentos até chegar na solução;
* conte o tempo até chegar na solução;
* ao invés de números, use imagens para a montagem de seu quebra-cabeça;
* crie um botão que permita a completa desorganização das peças;
* EXTRA – movimentação suave das peças de uma posição para outra;
* EXTRA – crie uma funcionalidade para resolver automaticamente o problema.

]]> http://www.brunocampagnolo.com/2009li/2009/09/30/exercicio-f12-jogo-dos-15-ex-3o-bimestre-prof-henri/feed/ 0 Exercício F11 – Moedeiro (ex 1o Bimestre – Prof. Emerson) http://www.brunocampagnolo.com/2009li/2009/09/29/exercicio-f11-moedeiro-ex-1o-bimestre-prof-emerson/ http://www.brunocampagnolo.com/2009li/2009/09/29/exercicio-f11-moedeiro-ex-1o-bimestre-prof-emerson/#comments Tue, 29 Sep 2009 19:41:57 +0000 admin http://www.brunocampagnolo.com/2009li/?p=549 Controle do Moedeiro de uma Máquina de Venda de Refrigerantes
Objetivo
– Controlar o moedeiro (caixa) de uma máquina de venda de refrigerantes. O programa, escrito em JavaScript, deve permitir o pagamento de uma bebida, aceitando moedas (0.1, 0.25, 0.5 e 1.0 real) e cédulas (2.0 reais). O programa deve fornecer (informar) o troco, quando necessário, baseado na quantidade de peças (moedas) em estoque (moedeiro).
– Exemplo:
• Valor bebida: 0.75 reais
• Valor depositado: 2.0 reais
• Troco: 1.25 real (0.25 + 1.0)
– Cabe ao programa realizar a gestão do estoque de peças, atualizando-o a cada compra.

- Seja criativo na representação da colocação de moedas. Por exemplo, represente graficamente a colocação das moedas.

- Caso você tenha implementado em Java este problema, entregue também sua resposta em Java.

moedeiro


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<img src="moeda50.jpg" id="moeda50">
		<form action="">
			<button id="btMostrarValor" type="button">Mostrar Valor</button>
			<input type="text" id="display">
		</form>

		<script type="text/javascript">
			var moedeiro = []; // Armazena as moedas temporariamente
			document.getElementById("moeda50").onclick = function () {
				alert("Capluft - Moeda de 50 centavos no moedeiro");
				moedeiro.push(50);
				alert(moedeiro);
			}
			document.getElementById("btMostrarValor").onclick = function () {
				var acumulador = 0;
				for(i=0;i<moedeiro.length;i++) {
					acumulador = acumulador + moedeiro[i];
				}
				document.getElementById("display").value = acumulador;
			}

		</script>
	</body>
</html>
]]> http://www.brunocampagnolo.com/2009li/2009/09/29/exercicio-f11-moedeiro-ex-1o-bimestre-prof-emerson/feed/ 0 Exercício O06 – Apenas Turma U – Competição JavaScript http://www.brunocampagnolo.com/2009li/2009/09/09/exercicio-o06-apenas-turma-u-competicao-javascript/ http://www.brunocampagnolo.com/2009li/2009/09/09/exercicio-o06-apenas-turma-u-competicao-javascript/#comments Thu, 10 Sep 2009 00:00:30 +0000 admin http://www.brunocampagnolo.com/2009li/?p=515 Na última aula, trabalhamos com a linguagem JavaScript.

No começo de nossa disciplina, lá na Aula 03, ou seja, antes mesmo de você ter o primeiro contato com qualquer linguagem de programação fizemos o exercício O03, o qual já lidava com alguns conceitos de JavaScript.

Sua tarefa hoje será REFAZER o exercício O03. A diferença, agora, é que você já conhece um pouco de JavaScript e já sabe como usar o Firebug para depurar seu código.
Além disso, você deve fazer uma competição com seus colegas. Quanto MAIS exercícios CORRETOS você entregar maior será a sua nota. Também será dado um prêmio à turma com mais resultados corretos.

Entregue abaixo seu código – você tem até as 22:00h:

]]> http://www.brunocampagnolo.com/2009li/2009/09/09/exercicio-o06-apenas-turma-u-competicao-javascript/feed/ 0 Criada pasta de entrega para o trabalho F08 http://www.brunocampagnolo.com/2009li/2009/07/23/criada-pasta-de-entrega-para-o-trabalho-f08/ http://www.brunocampagnolo.com/2009li/2009/07/23/criada-pasta-de-entrega-para-o-trabalho-f08/#comments Thu, 23 Jul 2009 18:50:04 +0000 admin http://www.brunocampagnolo.com/2009li/?p=488 Pasta de entrega do trabalho F08 foi criada no Eureka, módulo Plano de Trabalho.

]]> http://www.brunocampagnolo.com/2009li/2009/07/23/criada-pasta-de-entrega-para-o-trabalho-f08/feed/ 0 Exercício F07 – CSS Sprite http://www.brunocampagnolo.com/2009li/2009/06/16/exercicio-f07-css-sprite/ http://www.brunocampagnolo.com/2009li/2009/06/16/exercicio-f07-css-sprite/#comments Tue, 16 Jun 2009 22:54:38 +0000 admin http://www.brunocampagnolo.com/2009li/?p=457 CSS Sprite é uma técnica comum para a criação de menus, botões e montagem em geral de sua interface.
Dois exemplos da técnica vão a seguir:

A) Crie um botão em HTML/CSS utilizando a imagem em anexo.
Observe que o botão possui 3 estados: normal, visitado e quando o mouse passa sobre ele.
Para realizar este exercício você deve usar o código de aluno disponível na lista de alunos.

B) Crie uma composição qualquer utilizando os sprites disponíveis na imagem. Utilize, pelo menos, 25 sprites e 4 tipos de sprite diferentes.

Responder em: http://spreadsheets.google.com/viewform?formkey=cmhXMmxRSmpfWGV5c2wwbEp6MTdhYVE6MA..

]]> http://www.brunocampagnolo.com/2009li/2009/06/16/exercicio-f07-css-sprite/feed/ 0 Exercício F05 – Parte 2 da competição http://www.brunocampagnolo.com/2009li/2009/05/26/exercicio-f05-parte-2-da-competicao/ http://www.brunocampagnolo.com/2009li/2009/05/26/exercicio-f05-parte-2-da-competicao/#comments Tue, 26 May 2009 23:09:55 +0000 admin http://www.brunocampagnolo.com/2009li/?p=374

]]> http://www.brunocampagnolo.com/2009li/2009/05/26/exercicio-f05-parte-2-da-competicao/feed/ 0 Exercício F05 – Competição! http://www.brunocampagnolo.com/2009li/2009/05/26/exercicio-f05-competicao/ http://www.brunocampagnolo.com/2009li/2009/05/26/exercicio-f05-competicao/#comments Tue, 26 May 2009 22:48:17 +0000 admin http://www.brunocampagnolo.com/2009li/?p=368

]]> http://www.brunocampagnolo.com/2009li/2009/05/26/exercicio-f05-competicao/feed/ 0 Exercício O04 – Seletores do CSS 1.0 http://www.brunocampagnolo.com/2009li/2009/05/12/exercicio-o04-seletores-do-css-10/ http://www.brunocampagnolo.com/2009li/2009/05/12/exercicio-o04-seletores-do-css-10/#comments Tue, 12 May 2009 23:08:14 +0000 admin http://www.brunocampagnolo.com/2009li/?p=274 O objetivo deste exercício é o treino dos seletores que aprendeu na aula de hoje.

Para a resolução destes exercícios você trabalhará apenas com o arquivo exercicio_css.html, disponibilizado no link.
Em momento algum você alterará esse arquivo, mexendo apenas dentro da seção marcada no código:
<style type=”text/css”>
/* Alterar apenas aqui o seu arquivo */
</style>

Na entrega de seu exercício objserve que cada resposta é independente entre si a não ser se informado em contrário! Ou seja: não coloque a resposta do A junto com a resposta do B, etc.

Entregue seu exercício via formulário do Google, colando apenas a regra ou as regras geradas, sem colocar a tag <style>!

A) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os parágrafos contidos no texto;

B) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os cabeçalhos contidos no texto;

C) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas;

D) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas e de listas não numeradas;

E) Usando apenas uma regra, altere a cor e o fundo de todos os links que fazem parte de qualquer tipo de lista;

F) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor, o fundo e a fonte de todas as abreviaturas que estiverem dentro de um elemento de classe igual a texto;

G) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas após serem visitados;

H) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas de definição após serem visitados;

I) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas não numerada ao serem clicados;

J) Altere a fonte da primeira letra de todos os parágrafos;

K) Altere a cor da primeira letra de todos os parágrafos da classe texto;

Entrega do exercício (opcional):
http://spreadsheets.google.com/viewform?formkey=cm55WTg5NzY5OVlseGh4dFlvOF9sMnc6MA..

]]> http://www.brunocampagnolo.com/2009li/2009/05/12/exercicio-o04-seletores-do-css-10/feed/ 0 Exercício F04 – Formulários http://www.brunocampagnolo.com/2009li/2009/05/05/exercicio-f04-formularios/ http://www.brunocampagnolo.com/2009li/2009/05/05/exercicio-f04-formularios/#comments Tue, 05 May 2009 23:01:12 +0000 admin http://www.brunocampagnolo.com/2009li/?p=226 Neste exercício você deverá gerar uma interface para um formulário. O objetivo é que você conheça os principais componentes de formulário.

1) Obtenha o seu código de aluno a partir do link a seguir. Este código é numérico e está ao lado de seu nome.
http://spreadsheets.google.com/pub?key=pD5xiFKE9oj3zjpUy8k94Ow&gid=1
2) Clique no botão abaixo para gerar seu exercício. Você deverá digitar o código obtido acima.
Caso contrário, seu exercício será desconsiderado!
Você deverá gerar uma interface de formulário o mais semelhante possível à interface gerada. Incluindo a lista de explicação do exercício.
executar no firefox

3) Entregue seu exercício no link abaixo:
http://spreadsheets.google.com/viewform?formkey=cnZxbGZHT1JNc1BYWHU3LUN6T25kNlE6MA..

Entrega até o dia anterior à sua aula: 11 ou 12 de maio.

]]> http://www.brunocampagnolo.com/2009li/2009/05/05/exercicio-f04-formularios/feed/ 0 Exercício F02 – Exemplo de Resposta http://www.brunocampagnolo.com/2009li/2009/03/27/exercicio-f02-exemplo-de-resposta/ http://www.brunocampagnolo.com/2009li/2009/03/27/exercicio-f02-exemplo-de-resposta/#comments Fri, 27 Mar 2009 14:40:50 +0000 admin http://www.brunocampagnolo.com/2009li/?p=168 Olá, Pessoal,

Segue em anexo, exemplo de resposta esperada para o exercício F02. Observe que esta resposta é apenas parcial, e só dá dicas de como espero que seja parte de seu resultado.

]]> http://www.brunocampagnolo.com/2009li/2009/03/27/exercicio-f02-exemplo-de-resposta/feed/ 0 Exercício F02 – Imagens, Listas e Links http://www.brunocampagnolo.com/2009li/2009/03/24/exercicio-f02-imagens-listas-e-links/ http://www.brunocampagnolo.com/2009li/2009/03/24/exercicio-f02-imagens-listas-e-links/#comments Tue, 24 Mar 2009 22:59:33 +0000 admin http://www.brunocampagnolo.com/2009li/?p=123 Neste exercício você deverá gerar uma interface para um jogo de labirinto.

1) Obtenha o seu código de aluno a partir do link a seguir:
http://spreadsheets.google.com/pub?key=pD5xiFKE9oj1AmhmdcnbZQw
2) Clique no botão abaixo para gerar seu exercício. Você deverá digitar o código obtido acima.
Caso contrário, seu exercício será desconsiderado!

CHAME ESTE BOTÃO NO FIREFOX!


3) Descompacte o arquivo gerado em disco. Por exemplo, na pasta C:\temp\maze1.
Importante: para resolver o seu exercício você é proibido de alterar o local de qualquer um dos arquivos e pastas.

4) Percorra cada uma das pastas geradas dentro da pasta rooms (room1_1, room1_2, etc). Cada pasta representa uma sala em um labirinto.

5) Em cada uma destas pastas, crie um arquivo chamado index.html. Este arquivo deverá conter um link para os arquivos index.html contidos nas salas indicadas dentro do arquivo links.txt. Este link deverá ser a imagem da porta da sala destino (door.png). Coloque também um título e um pequeno parágrafo de descrição desta sala.

6) Além disso, este arquivo também conterá a imagem map.png contida nesta mesma pasta.

7)Também existem algumas salas secretas distribuídas pela estrutura de pastas. Coloque o link para essas salas secretas escondido em algum lugar desta página.

8 ) Ainda dentro deste arquivo index.html, crie uma lista de definição que explique o que é cada um dos objetos citados no arquivo obj.txt. Também coloque o link para a imagem de cada um destes objetos, os quais estão contidos dentro da pasta obj, por exemplo, C:\temp\maze1\obj.

9) Crie um arquivo chamado index.html só que agora dentro da raiz da pasta descompactada. Por exemplo, crie o arquivo C:\temp\maze1\index.html

10) Neste arquivo, coloque uma lista numérica que represente a estrutura de objetos da pasta obj com um link para cada imagem.

11) Também crie uma lista hierárquica que forneça link para cada um dos arquivos index.html dentro da pasta rooms que representam uma sala. Não esqueça de fazer o link para as salas secretas também!

12) extra – Por fim, ainda neste arquivo, coloque a imagem contida na pasta map (map.png). Crie um mapa de imagem no qual quando o usuário clica em cada sala ele é direcionado ao arquivo index.html correspondente à sala.

Entregue sua resposta via Correio do Eureka!!

]]> http://www.brunocampagnolo.com/2009li/2009/03/24/exercicio-f02-imagens-listas-e-links/feed/ 0 Exercício O03 – JavaScript http://www.brunocampagnolo.com/2009li/2009/03/10/exercicio-o03-javascript/ http://www.brunocampagnolo.com/2009li/2009/03/10/exercicio-o03-javascript/#comments Tue, 10 Mar 2009 23:03:30 +0000 admin http://www.brunocampagnolo.com/2009li/?p=47