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

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

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

28/janeiro

• 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