TADS:Desenvolvimento Web I (2015-2)

Plano de ensino

1. IDENTIFICAÇÃO

Curso: Tecnologia em Análise e Desenvolvimento de Sistemas

Componente Curricular: Desenvolvimento Web I

Professor: Estevan Braz Brandt Costa

Turma: 01/2015

Período Letivo: Segundo

Ano: 2015

Carga horária: 72

Horário Semanal de Atendimento ao Estudante: Determinar uma data

2. EMENTA

Visão histórica da internet; Conceitos básicos sobre o funcionamento e os protocolos da internet; Conceito de hipertexto e hipermídia; Linguagem de marcação HTML e sua utilização na estruturação de páginas web; Linguagem de folha de estilos (CSS); linguagem de programação JavaScript.

3. CONTEÚDO PROGRAMÁTICO

1. Linguagem HTML
   1. Tag's de gerenciamento de conteúdo
   2. Navegação entre páginas
   3. Gerenciamento de Imagens e vídeos
   4. Tabelas
   5. Formulários GET e POST
   6. HTML 5
2. CSS
   1. Criação de Regras e Seletores
   2. Formatação de textos e imagens
   3. Posicionamento de blocos com DIV
   4. Regras vinculadas a ações do usuário
3. Javascript
   1. Integração do Javascript com o HTML
   2. Variáveis
   3. Funções
   4. Arrays em Javascript
   5. Gerenciamento do DOM (Document Object Model)
   6. Criação de Objetos em Javascript
   7. Utilização de Frameworks

4. OBJETIVOS DO COMPONENTE CURRICULAR

Estudar e utilizar as tecnologias básicas para a construção de web sites, em especial a linguagem de marcação HTML, em conjunto com a linguagem de folha de estilos – CSS e a linguagem de programação Javascript

5. PROCEDIMENTOS METODOLÓGICOS

Metodologia de ensino

• Aulas expositivas em laboratório de informática com projetor.
• Uso de ambiente de programação para desenvolvimento das atividades
• Uso do computador para em laboratório para exemplificação dos conteúdos didáticos

Recursos e materiais

• Aulas expositivas empregando: quadro, multimídia;
• Seminários para apresentação de trabalhos;
• Trabalhos individuais e/ou grupo;
• Exercícios em sala de aula.

6. AVALIAÇÃO

Trabalhos individuais e/ou grupo;

Apresentação de seminários;

Provas bimestrais individuais;

Participação em sala.

REFERÊNCIAS BIBLIOGRÁFICAS

REFERÊNCIAS BÁSICAS

1. SILVA, Maurício Samy. JavaScript: Guia do Programador. Novatec, 2010.
2. SANDERS, Bill. Smashing HTML 5: Técnicas para a Nova Geração da Web. Bookman, 2012.
3. MEYER, Eric A. Smashing CSS - Técnicas Profissionais para um Layout Moderno. Bookman, 2011.
4. LUBBERS, Peter; ALBERS, Brian; SALIM, Frank. Programação Profissional em HTML5. Altabooks, 2013.
5. FLANAGAN, David. JavaScript: O Guia Definitivo. Bookman, 2012.

REFERÊNCIAS COMPLEMENTARES

1. LAWSON, Bruce; SHARP, Remy. Introdução ao HTML 5. Altabooks,
2. COLLISON, Simon. Desenvolvendo CSS na Web: do Iniciante ao Profissional. Altabooks, 2008.
3. GOMES, Ana Laura. XHTML/CSS – Criação de páginas web. Senac, 2010.
4. SILVA, Mauricio Samy. HTML5 – A Linguagem de Marcação que Revolucionou a Web. Editora Novatec: 2011.
5. BOLTON, Jina; SMITH, Steve; ADAMS, Cameron; JOHNSON, David. A Arte e a Ciência da Css - Crie Web Designs Inspiradores Baseados em Padrões. Editora Bookman: 2009.

Diários de Sala

26/fevereiro

Aula Extra (Sexta, 2 primeiros horários)

Realizar o trabalho e tirar dúvidas!

25/fevereiro

Trabalho de Desenvolvimento WEB

- Criar uma página que permita o usuário efetuar uma compra.

- O usuário deve ter uma tela com imagens do produto que deseja comprar. Sua loja deve fornecer pelo menos 9 produtos diferentes.

- Ao clicar em uma das imagens, esta deve ser destacada de alguma forma (fica a cargo como fazer isso, porém deve usar a funcão ANIMATE)

- Também ao clicar em uma das imagens, o usuário deve ser capaz de escolher a quantidade que deseja do produto e clicar em Inserir.

- Na mesma página, mais abaixo, o usuário poderá ver quais produtos ele já inseriu. Cada produto deve mostrar uma foto do produto, nome, quantidade e valor total do produto na compra.

- Caso o usuário insira várias vezes o mesmo produto, a página pode agir de 2 formas: mostrar somente uma entrada do produto, com a somatória do produto, ou mostrar uma entrada para cada vez que o usuário clicou em inserir.

- Os dados de nome, e valor unitário do produto não são controladas pelo usuário, e sim já pré-definidas pelo programador, não podendo ser alterado.

- O sistema deve permitir o usuário excluir um produto já inserido da listagem dos produtos comprados. A exclusão de um produto deve, além de excluir o item comprado da lista, utilizar-se da funcão ANIMATE para excluí-lo.

- Ao final de tudo, deve ser mostrado o total de todos os produtos comprados.

 - Entregar o trabalho até dia 29/02
 - Individual
 - Entregar por e-mail para estevan.costa@ifpr.edu.br
 - Assunto no e-mail: Trabalho WEB 2902
 - Arquivos do trabalho compactados em um arquivo com seu nome completo

23/fevereiro

LUTO

18/fevereiro

Pendente

16/fevereiro

Como já visto anteriormente, o Javascript não possui uma ligação direta com o html. Estes conversam por meio de um intermediário chamado DOM (Document Object Model). Isto não é diferente no jQuery. Assim temos alguns métodos específicos para poder trabalhar com este DOM, que podem facilmente adicionar ou remover elementos. No exemplo a seguir é possível ver o método APPEND, que adiciona um elemento a página.

<html>
	<script src="jquery-2.2.0.min.js"></script>
	<script>
		var x = 0;
		$(document).ready(function(){
			$("#botao").click(function(){
				//$("#saida").html("<p>Oi</p>");
				$("#saida").append("<p>Oi"+x+"</p>");
				x++;
			});

			$("#botao2").click(function(){
				$("#saida p").remove();
			});

			$("#saida").on("click", "p", function(){
				$(this).remove();
			});
		});
	</script>
	<body>
		<p> Seja bem Vindo </p>
		<input type="button" value="adicionar" id="botao">
		<input type="button" value="remover" id="botao2">
		<div id="saida">
		</div>

	</body>
</html>

Além disso temos a função REMOVE, que faz o processo inverso do Append. Só precisa tomar cuidado ao usar esta função, pois caso o seletor utilizado pegar mais de um elemento, todos serão removidos do DOM. Além disso, como o DOM segue uma estrutura em árvore, caso você remova um elemento que possui outros elementos dentro dele, TODOS serão removidos.

Outra função fornecida pela biblioteca jQuery é a CLONE, que permite fazer uma cópia fidedigna de um elemento já existente. Assim como a função REMOVE, todos os elementos que estão dentro do elemento que está sendo clonado irão juntos. Abaixo tem um exemplo de como utilizar esta função.

<html>
	<style>
		.fera{
			border: solid 1px black;
			width : 500px;
			height: 80px;
			margin: 20px;
			padding: 20px;
		}
	</style>
	<script src="jquery-2.2.0.min.js"></script>
	<script>
		var controle = 0;
		$(document).ready(function(){
			$("#botao").click(function(){
				var outro = $("#produto").clone();	
				if(controle == 0)
				{
					outro.css("backgroundColor","red");
					controle = 1;
				}
				else
				{
					outro.css("backgroundColor","blue");
					controle = 0;
				}
				$("#saida").append(outro);
			});
		});
	</script>
	<body>
		<input type="button" value="adicionar" id="botao"><br>
		<div id="saida">
			<div class="fera" id="produto">
				Codigo:     <input type="text"><br>
				Quantidade: <input type="text">
			</div>
		</div>
	</body>
</html>

No exemplo acima, a função CLONE é atribuída para uma variável. Esta variável contêm a cópia produzida, podendo ser manipulada pelas funções de jQuery já aprendidas. No exemplo a função CSS é utilizada antes de chamar a função APPEND para adicionar a cópia produzida a outro elemento.

13/fevereiro

Este dia foi solicitado para os alunos praticarem sobre a função .animate(). Para isto foi solicitado para os alunos realizarem 2 exercícios:

1) Criar uma página que mostre 4 imagens, todas semi-transparentes. Além das imagens, o site precisa ter uma área vazia. Ao clicar em uma das imagens semi-transparentes, a imagem clicada deve ficar opaca, e uma cópia da imagem deve aparecer na área vazia, no tamanho grande.

Solução: (é necessário que tenha 4 imagens na mesma pasta que este código, para poder funcionar):

<html>
	<style>
		div{
			margin: auto;
		}
		.grande, .imggrd{
			width: 400px;
			height: 400px;
			border: solid 1px black;
		}

		.imgpeq{
			width : 94px;
			height: 94px;
			margin: 1px;
			opacity: 0.33;
		}
		.pequenos{
			width: 400px;
			height: 100px;
		}
	</style>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".imgpeq").click(function(){
				$("#imggrd").slideUp(1);
				$("#imggrd").attr("src", $(this).attr("src"));
				$("#imggrd").slideDown(500);
				$("#imggrd").css("width","400px");
				$(".imgpeq").fadeTo("fast", 0.33);
				$(this).fadeTo("fast", 1);
			});
		});
	</script>

	<head></head>
	<body>
		<div class="grande">
			<img id="imggrd">
		</div>
		<div class="pequenos">
			<img class="imgpeq" src="img1.jpg">
			<img class="imgpeq" src="img2.jpg">
			<img class="imgpeq" src="img3.jpg">
			<img class="imgpeq" src="img4.jpg">
		</div>
	</body>
</html>

2) Criar uma página com 4 divs, cada um com características que a diferenciem, como tamanho e cor (fica a sua escolha como diferenciá-las). Fazer com que cada um dessas div's tenha um movimento qualquer, um diferente do outro, mas que seja perpétuo, ou seja, caso o usuário deixar a página aberta, as div's devem se movimentar indefinidamente.

Solução:

O movimento perpétuo ocorre pois cada div possui uma função própria, que por meio do SETTIMEOUT ela se chama após o movimento ter concluído. Assim, cada função vai fazer 2 passos, controlados pelo parâmetro indicado na hora de chamar a função. Se passar 0, vai fazer um movimento, se passar 1 vai fazer outro movimento. Também é tomado o cuidado de colocar o tempo para a chamada da SETTIEOUT igual ao tempo da função ANIMATE.

<html>
	<script src="jquery-1.11.3.min.js"></script>
	<style>
		div{
			border: solid 1px black;
			width: 50px;
			height: 50px;
			position: absolute;
		}
		#bloco1{
			background-color: #123456;
		}

		#bloco2{
			background-color: #75AEF8;
		}

		#bloco3{
			background-color: #FF6779;
		}

		#bloco4{
			background-color: #11FF45;
		}
	</style>
	<script>
	function movimento1(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco1").animate({left : "300px"}, 1000);
			tipo = 1;
		}
		else
		{
			$("#bloco1").animate({left : "0px"}, 1000);
			tipo = 0;
		}
		setTimeout(movimento1, 1000, tipo);
	}

	function movimento2(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco2").animate({left : "500px" , top: "500px"}, 1500);
			tipo = 1;
		}
		else
		{
			$("#bloco2").animate({left : "0px", top: "0px"}, 1500);
			tipo = 0;
		}
		setTimeout(movimento2, 1500, tipo);
	}

	function movimento3(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco3").animate({bottom : "200px" , right: "500px"}, 5000);
			tipo = 1;
		}
		else
		{
			$("#bloco3").animate({bottom : "0px", right: "0px"}, 5000);
			tipo = 0;
		}
		setTimeout(movimento3, 5000, tipo);
	}

	function movimento4(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco4").animate({top : "300px" , left: "0px"}, 2000);
			tipo = 1;
		}
		else
		{
			$("#bloco4").animate({top : "300px", left : "500px"}, 2000);
			tipo = 0;
		}
		setTimeout(movimento4, 2000, tipo);
	}
	$(document).ready(function(){
		movimento1(0);
		movimento2(0);
		movimento3(0);
		movimento4(0);
	});
	</script>
	<head></head>
	<body>
		<div id="bloco1"></div>
		<div id="bloco2"></div>
		<div id="bloco3"></div>
		<div id="bloco4"></div>
	</body>
</html>

11/fevereiro

• TADS:Desenvolvimento Web: codigos1102: Códigos Produzidos na Aula

04/fevereiro

Parabéns ao aluno FAAHD por ser o primeiro a entregar todos os exercícios com louvor!

Exercícios:

---

1 - Criar uma página que tenha 2 campos textos, um botão e uma div com o seu nome nela. O usuário deverá inserir o nome de uma propriedade CSS em um campo e um valor no outro. Ao clicar no botão, a propriedade indicada no primeiro campo deve influenciar no nome que está impresso na tela. Supondo que a pessoa digite COLOR no primeiro campo e RED no segundo, ao clicar no botão o nome do usuário deve ficar vermelho. Além disso, os campos devem ser limpos para a pessoa poder colocar outro campo.

(Modo One Punch Man: Criar um segundo botão que faz o nome voltar ao normal, sem influência de nenhuma regra CSS inserida pelo usuário.)

---

2 - Criar uma div com borda e cor de fundo a sua escolha, tamanho de 50 px por 50 px. Toda vez que o usuário clicar nesta div, ela deve mudar de lugar. O padrão e para onde ela vai fica ao seu critério.

(Modo One Punch Man: Fazer com que a cada 1 segundo ela mude de lugar, sem precisar clicar nela)

---

3 - Criar uma tabela 3 x 3 e um botão. Ao clicar no botão, deve aparecer valores numéricos aleatórios em cada célula da tabela.

(Modo One Punch Man: Fazer com que os valores gerados aleatoriamente comecem a decrementar seu valor em 1, e quando chegar a 0, parar de decrementar o valor)

---

4 - Criar uma página com uma área para mostrar diferentes imagens em um único lugar e 2 botões. Ao carregar a página, esta já deve mostrar a primeira imagem. Um botão deve ser "Próximo" e o outro "Anterior". Ao clicar em Próximo, deve ser mostrada a segunda imagem no lugar da primeira, e assim por diante (se a imagem for a última, voltar para a primeira). Se clicar em Anterior, deve ser mostrado a imagem anterior (se for a primeira, mostrar a última). Utilize pelo menos 5 imagens.

(Modo One Punch Man: Fazer com que troque de imagem a cada 1 segundo).

---

5 - Criar uma página dedicada ao poeta dos poetas, Wesley Safadão. Utilize pelo menos um evento de clicar para alterar o status da página de alguma forma. Use sua imaginacão.

(Modo One Punch Man: Não se emocione ao realizar esta página)

02/Fevereiro

• TADS:Desenvolvimento Web: codigos0202: Códigos Produzidos na Aula

30/janeiro

• TADS:Desenvolvimento Web: codigos3001: Códigos Produzidos na Aula

28/janeiro

• TADS:Desenvolvimento Web: codigos2801: Códigos Produzidos na Aula

• Download da Biblioteca jQuery

Caso deseje fazer o download da biblioteca:

<script src="jquery-1.12.0.min.js"></script>

ou você pode utilizar via CDN pela google utilizando o seguinte código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

• TADS:Exercícios Fixação: 2016-01-28: Exercícios de Fixação

10/dezembro

• Trabalho de Avaliação