Edição das 18h55min de 24 de fevereiro de 2016

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

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

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

REFERÊNCIAS COMPLEMENTARES

LAWSON, Bruce; SHARP, Remy. Introdução ao HTML 5. Altabooks,
COLLISON, Simon. Desenvolvendo CSS na Web: do Iniciante ao Profissional. Altabooks, 2008.
GOMES, Ana Laura. XHTML/CSS – Criação de páginas web. Senac, 2010.
SILVA, Mauricio Samy. HTML5 – A Linguagem de Marcação que Revolucionou a Web. Editora Novatec: 2011.
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

23/fevereiro

LUTO

18/fevereiro

16/fevereiro

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

TADS:Desenvolvimento Web I: mudanças entre as edições