Exibir código-fonte para TADS:Desenvolvimento Web I

=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
## Tag's de gerenciamento de conteúdo
## Navegação entre páginas
## Gerenciamento de Imagens e vídeos
## Tabelas
## Formulários GET e POST
## HTML 5
# CSS
## Criação de Regras e Seletores
## Formatação de textos e imagens
## Posicionamento de blocos com DIV
## Regras vinculadas a ações do usuário
# Javascript
## Integração do Javascript com o HTML
## Variáveis
## Funções
## Arrays em Javascript
## Gerenciamento do DOM (Document Object Model)
## Criação de Objetos em Javascript
## 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 =

==04/fevereiro==
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 Hard: 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 Hard: 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 Hard: 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 Hard: 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 Hard: Não se emocione ao realizar esta página)

==28/janeiro==
*[http://jquery.com/ Download da Biblioteca jQuery]

Caso deseje fazer o download da biblioteca:

<syntaxhighlight lang="jquery">

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

</syntaxhighlight>

ou você pode utilizar via CDN pela google utilizando o seguinte código:
<syntaxhighlight lang="jquery">

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

</syntaxhighlight>

*[[TADS:Exercícios Fixação: 2016-01-28]]: Exercícios de Fixação

==10/dezembro==
*[[Mídia:segundaavaliacaoweb1.zip | Trabalho de Avaliação]]