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 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:Estrutura de Dados: codigos0202: Códigos Produzidos na Aula
30/janeiro
- TADS:Estrutura de Dados: codigos3001: Códigos Produzidos na Aula
28/janeiro
- TADS:Desenvolvimento Web: codigos2801: Códigos Produzidos na Aula
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
