Já finalizei todas as correções necessárias e suas notas já estão na planilha abaixo.
Esta planilha é o que vale.

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHpidnBWUC1kd0VSUmJWaDFJUDMwbHc&hl=pt_BR

Observem  possiveis erros de lançamento no iger e entrem em contato se necessário.

Caso alguém queira conversar comigo e conferir sua prova final, amanhã (sábado) das 8:00h às 9:30h estarei no Lab 7 do CCET. Destaco que não irei na PUCPR na segunda-feira.

Desejo a todos, boas férias e um excelente ano novo!

Por favor, verifiquem suas notas finais:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHpidnBWUC1kd0VSUmJWaDFJUDMwbHc&hl=pt_BR

Confiram as notas acima! Qualquer problema, venha conversar comigo na terça ou quarta-feira.

IMPORTANTE: todos que estão em situação limítrofe (médias 68 a 69.9 e 38 a 39.9) devem comparecer na aula no dia da prova final.

Lembrem-se: a final é na terça (8/12) para a turma V e (9/12) para a turma U.

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHpidnBWUC1kd0VSUmJWaDFJUDMwbHc&hl=pt_BR

POR FAVOR, CONFIRA SUAS NOTAS!!!!

As notas da 3a Parcial até segunda-feira!
Sobre a quarta-parcial, observem as datas:
* 17/11 – última aula expositiva: bibliotecas JavaScript;
* 24/11 – livre (trabalho F14);
* 30/11 – Entrega do trabalho F14;

*1/12 – PROVA DA TURMA V;
* 2/12 – PROVA DA TURMA U;

* 8/12 – Prova Final – Turma V.

* 9/12 – Prova Final – Turma U.

1) Escolha duas dentre bibliotecas listadas no resumo a seguir ou procure por alguma biblioteca na Internet:

http://www.brunocampagnolo.com/2009_2/js/libs

Antes de escolher sua biblioteca verifique se alguém já não a escolheu no link abaixo:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdFNrRk5VclFZUnBiMlFUVmRhT1VKTHc&hl=pt_BR

É essencial que cada aluno use uma biblioteca diferente.

Selecione sua biblioteca no link abaixo:

http://spreadsheets.google.com/viewform?formkey=dFNrRk5VclFZUnBiMlFUVmRhT1VKTHc6MA

2) Para cada biblioteca, crie uma página HTML sobre ela, citando:

* Nome;

* Criador;

* Ano de criação;

* Versão;

* Link;

* Descrição do que faz a biblioteca;

* Licença;

* Preço;

* Compatibilidade com navegadores;

* Tamanho (KB);

* Performance;

* Exemplo de sites que utilizam e links relacionados;

* Requisitos para instalação e dependências;

* Passos para instalação;

* Pelo menos 3 exemplos DE CÓDIGO BEM COMENTADOS;

O primeiro exemplo, pode ser igual a um exemplo já fornecido pela biblioteca.

O segundo exemplo deve ser inédito.

Seu terceiro exemplo também deve ser inédito e usar também outra biblioteca qualquer a sua escolha. Por exemplo, se você escolheu uma biblioteca de zoom, faça um exemplo com ela e com mais uma outra biblioteca qualquer.

3) Você deverá apresentar seu segundo exemplo no dia 1 ou 2/12.

ENTREGA VIA EUREKA, EM PASTA CRIADA NO MÓDULO CONTEÚDO E VIA CORREIO ATÉ O DIA 31/11 (01/12, pela manhã).

Deixe seu exemplo público, para que seus colegas também possam vê-lo!

Chegamos a nosso último tópico!

Segue, abaixo e no link.

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.

O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.

Apresentação referente à aula

Exemplos utilizados na aula:

• Layout de 2 colunas líquido
• Layout de 3 colunas líquido
• Formulário com TABELAS (sem CSS) – 1
• Formulário com TABELAS (sem CSS) – 2
• Formulário com TABELAS (sem CSS) – 3
• Formulário com alteração das bordas
• Formulário com alteração de bordas (correto)
• Formatando label, fieldset e legend
• Layout baseado em tabelas
• Layout baseado em parágrafos
• Layout baseado em listas
• Relembrando formatação de links
• Relembrando formatação de listas
• Exemplo de rollover com 2 imagens
• Exemplo de rollover com 1 imagem
• Exemplo de menu vertical

Imagens utilizadas nos exemplos:

Links para Layouts prontos em CSS:

• http://www.csseasy.com/
• http://layouts.ironmyers.com/
• http://www.code-sucks.com/css%20layouts/
• http://www.glish.com/css/
• http://www.intensivstation.ch/en/templates/

Links para frameworks CSS:

• http://www.blueprintcss.org/
• http://960.gs/
• http://developer.yahoo.com/yui/grids/
• http://delicious.com/bcp/css+framework

Links para geradores de layout:

http://developer.yahoo.com/yui/grids/builder/
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
http://builder.yaml.de/

<!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>
<style type="text/css">
#cabecalho {
background-color: red;
border: 1px solid black;
}
#lateral {
background-color: blue;
border: 1px solid black;
width: 39%;
float: left;
min-height: 400px;
}
#conteudo {
width: 60%;
background-color: green;
border: 1px dotted black;
float: right;
min-height: 400px;
}
#rodape {
background-color: yellow;
border: 1px dotted black;
clear: both;
}
#container {
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="cabecalho">
<h1>Site do Jamanta</h1>
</div>
<div id="lateral">
<ul>
<li>Principal</li>
<li>Sobre</li>
<li>...</li>
</ul>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>        </div>
<div id="rodape">
<h6>Bruno C. de Paula</h6>
</div>
</div>

</body>
</html>

<!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>
<style type="text/css">
#img2 {
position: relative;
left: 100px;
top: 50px;
}
#container { background-color: #ccc;}
#img3 {
position: absolute;
left: 100px;
top: 100px;
}
#img4 {
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Posicionamento Estatico</h1>
<img src="eu.png">
<h1>Posicionamento Relativo</h1>
<img id="img2" src="eu.png">
<h1>Posicionamento Absoluto</h1>
<img id="img3" src="eu.png">
<h1>Posicionamento Fixo</h1>
<img id="img4" src="eu.png">
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
</body>
</html>

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.

Apresentação referente à aula

Trabalharemos na aula de hoje com as propriedades:

• float: determina o posicionamento de um elemento em relação ao fluxo;
• clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores;
• position: tipo de posicionamento de um elemento;
• width: largura de um elemento, obrigatório nos elementos com float;
• left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado;
• top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado;

Exemplos referentes à aula:

• Posicionamento padrão, sem float
• Exemplo de aplicação de float:left
• Exemplo de float left com problema com o contâiner pai
• Uso do clear left
• Exemplo com float right
• Exemplo com clear right
• Aplicando a propriedade clear both
• Resolvendo o problema do container pai usando spacer
• Usando mais de um float
• Usando mais de um float (sem spacer)
• Usando mais de um float com float right
• Posicionamento estático
• Posicionamento relativo
• Posicionamento absoluto
• Posicionamento absoluto + relativo
• Posicionamento fixo
• Exemplo de layout de 2 colunas
• Exemplo de layout de 3 colunas

Os exercícios não precisam ser entregues.
Serão cobrados APENAS no dia da defesa: 20 e 21/10/2009.

Não há entrega posterior do exercício!

Lembre-se: no máximo duplas.

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.

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

Por favor, reclame qualquer problema, abaixo:
http://spreadsheets.google.com/viewform?formkey=dEFzdWotQUNUNXJsaV8zTXcwdlNkZ2c6MA..

Estes exercícios tem como objetivo além de trabalhar com a manipulação de vetores, começar o trabalho com manipulação do Documento HTML em JavaScript (DOM).

01) Desenvolva uma interface HTML com um botão (botão ‘Criar’).

Crie um programa em JavaScript que ao clicar em um botão crie uma nova caixa de texto ao lado do botão ‘Criar’.

Dica:

• Como criar uma caixa de texto e inserir dentro de um outro elemento:
• var myInput= document.createElement(“input”);
• myInput.setAttribute(“type”,”text”);
• myDiv= document.getElementById(“myDiv”);
• myDiv.appendChild(myInput);

02) Desenvolva uma interface HTML com dois botões (botão ‘Criar’ e botão ‘Multiplicar’).

Crie um programa em JavaScript que ao clicar em um botão crie uma nova caixa de texto ao lado do botão ‘Criar’.

Ao clicar no botão ‘Multiplicar’, todos os valores contidos nas caixas de texto devem multiplicados e o resultado deve ser exibido.

Dicas:

• Use a função document.getElementsByTagName para obter um vetor de elementos a partir da tag.
• o atributo value de uma caixa de texto altera/recupera o que está escrito na caixa de texto;

03) Desenvolva uma interface HTML com uma caixa de texto e um botão.

Quando o usuário clicar no botão, devem ser criados X itens em uma lista abaixo do botão, sendo cada item um número inteiro aleatório diferente de 0 a 100.

Dicas:

• para sortear um número aleatório use a função Math.random();
• Para criar uma interface HTML você pode usar a propriedade .innerHTML de um <div>, ou usar a função document.createElement;

04) Desenvolva uma interface HTML com 6  caixas de texto e um botão.

Quando o usuário clicar no botão, os valores contidos dentro de cada uma das caixas de texto devem ser armazenados em um array, reordenados e devolvidos às caixas.

Dicas:

• Para ordenar os valores de um array utilize o método sort.

05)  Dado o seguinte array, que representa um conjunto de operações, faça um programa que aplique cada operação sucessivemente em um conjunto de valores fornecidos pelo usuário.

Exiba os resultados dentro de uma tabela.

var operacoes = [function (a,b) { return (a+b);}, function (a,b) {return (a-b);}, function (a,b) {return (a*b);}, function (a,b) {return (a/b);];

Por exemplo, se for fornecido 3 e 2 a tabela construída deve ser:

06)

Uma empresa de energia representa um mapa das áreas com problema de iluminação através de uma matriz. Assim, cada local com problema é representado por um número, sendo este número o custo em reais para resolver o problema. Por exemplo, no mapa abaixo, o número de pontos com problema é 8 o custo total para resolver os problemas é 12 e a média de dinheiro gasto é R$ 1,50.

Desenvolva um algoritmo que leia uma matriz de tamanho 5X4 de defeitos a partir do usuário e responda: qual é o número de pontos com problema, qual vai ser o dinheiro gasto e qual é a média de dinheiro gasto para resolver os problemas.

7) Escolha um algoritmo que você já desenvolveu na disciplina de Programação que envolva vetores.
(Turma V: Preferencialmente das listas 10, 12 e 13.)
Reimplemente este algoritmo em JavaScript.
Não esqueça de colocar o enunciado de seu exercício em sua resposta.

8 ) Escolha um algoritmo que você já desenvolveu na disciplina de Programação que envolva matrizes.
(Turma V: Preferencialmente das listas 10, 12 e 13.)
Reimplemente este algoritmo em JavaScript.
Não esqueça de colocar o enunciado de seu exercício em sua resposta.

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:

Esta aula não possui material relacionado, retorne ao material da aula anterior para dúvidas.

Retorne à aula anterior para dúvidas referentes à sintaxe básica da linguagem.

<!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>
		<form action="">
			<label for="nome">Nome:</label>
			<input type="text" id="nome" name="nome"><br>
			<label for="nascimento">Data nascimento:</label>
			<input type="text" id="nasc" name="nasc"><br>
			<input type="button" id="btConfirmar" value="Novo">
			<div id="listaContatos"></div>
		</form>
		<script type="text/javascript">

			var idContato = 1;
			var contatos  = [];
			var criarContato = function(pnome, pnascimento) {
			    var contato = { id: idContato++, nome: pnome, nascimento: pnascimento};
			    return contato;
			}
			var armazenarContato = function(contato,contatos) {
    			contatos[contatos.length] = contato;
			}
			var pesquisarContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, retorne este contato!
					if(contatos[i].id===id) {
						return contatos[i];
					}
				}
			}
			var excluirContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, elimine o contato!
					if(contatos[i].id===id) {
						contatos.splice(i,1);
					}
				}
			} 

			var incluirNovoContato = function () {
				var nome = document.getElementById("nome").value;
				var nascimento = document.getElementById("nasc").value;
				var contato = criarContato(nome, nascimento);
				armazenarContato(contato, contatos);
			}
			document.getElementById("btConfirmar").onclick = incluirNovoContato;

			// Código de Teste!
			/*
			arm = criarContato("Armando", "23/4");
			jam = criarContato("Jamanta", "22/5");
			cla = criarContato("Claudio", "23/6");

			armazenarContato(arm, contatos);
			armazenarContato(jam, contatos);
			armazenarContato(cla, contatos);
			*/

		</script>
	</body>
</html>

Segue abaixo a divisão dos temas para o Trabalho F08 (Turma V, Turma U1 e Turma U2):

http://spreadsheets.google.com/ccc?key=tW2i7qmYx0-z1LLuZEshw6g