29.03.2012 - qui

Finalizar trabalho dos times e realizar entrega no SIGA.

Dica Quente:
 - Como criar um DIV dinamicamente com javascript.
http://it.toolbox.com/wiki/index.php/Dynamically_Creating_a_Div_in_Javascript

27.03.2012 - ter - 5a. semana

Cookies:
 - Criar um aplicativo HTML que solicite um nome de usuário na entrada e verifique se o mesmo já acessou o computador e aquele browser. Caso positivo, mostrar a quantidade de vezes que o browser foi acessado; caso negativo, iniciar o contador em 1. Utilizar JS e Cookies para a atividade.


Dica de JS:
 - Como retirar espaços em branco de uma String (famoso trim(""))
http://www.pinceladasdaweb.com.br/blog/2009/06/29/javascript-retirando-espacos-de-string-funcao-trim/

22.03.2012 - qui

Códigos JavaScript prontos e muito legais:

• http://www.dynamicdrive.com/
• http://www.brainjar.com/js/cards/displaydemo.html (jogo de cartas) 

Java2s with JavaScript:

• http://www.java2s.com/Tutorial/JavaScript/CatalogJavaScript.htm (tutorial completo)
• http://www.java2s.com/Code/JavaScript/CatalogJavaScript.htm (códigos prontos)

Exemplos de HTML, CSS e JS feitos em aula:

20.03.2012 - ter - Exercícios!

Exercícios de JS:

[Parte 1] 
1 - Quiz JavaScript (http://w3schools.com/js/js_quiz.asp)
2 - Criar um HTML com alguns campos de um formulário e fazer a sua submissão somente se todos os campos estiverem preenchidos.
3 - Ao exercício anterior, agregar o efeito de mostrar uma mensagem ou imagem ao lado de cada campo não preenchido.
4 - Criar uma calculadora simples que some, substrai, multiplique e divida 2 números.

[Parte 2]
5 - Criar um HTML com um select que, ao trocar o item, mostra uma mensagem do nome do autor que deverá estar nas opções do select.
6 - Criar um HTML com um select que, ao trocar o item, redireciona para uma nova página.
7 - Criar um HTML com uma imagem que, ao cruzar o mouse por cima, troca para outra imagem, e ao sair, retorna à imagem anterior.

20.03.2012 - ter - 4a. semana

JavaScript:

• http://pt.wikipedia.org/wiki/JavaScript
• http://w3schools.com/js/default.asp
• http://www.w3schools.com/htmldom/default.asp (DOM - Document Object Model)
• http://w3schools.com/jsref/default.asp (DOM Reference)
• http://www.javascriptkit.com/

 
 Validação de <form>:

• Básicos: 
• http://imasters.com.br/artigo/2114/javascript/validacao-de-formulario
• http://helpmasters.com.br/artigo/79/validacao-de-formulario-em-javascript  
• http://www.quirksmode.org/js/forms.html (todos os elementos)
• Avançados:
• API pronta: http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
• Expressões Regulares: http://www.mhavila.com.br/topicos/web/valform.html

 
   Exercícios resolvidos de HTML, CSS e JavaScript:

• http://www.rodrigocordula.com.br/javascript.php

 
 Códigos-fontes de JavaScript:

• http://codigofonte.uol.com.br/codigos/js-dhtml
• http://www.codigofonte.net/scripts/javascript
• http://www.javascriptsource.com/
• http://www.scriptbrasil.com.br/codigos/javascript/
• http://www.scriptbrasil.com.br/codigos/dhtml/

15.03.2012 - qui

Trabalho em Aula - HTML e CSS

• Dividir a turma entre gremistas e colorados.
• Grêmio: http://www.gremio.net/
• Inter: http://www.internacional.com.br/home.php
• Desenvolver um protótipo de sistema em HTML e CSS contendo as seguintes telas:
• Tela de Listagem de Torcedores (torcedorList.html)
• Campos para filtragem  
• Tabela de dados, com um checkbox na primeira coluna para permitir excluir em lote
• Botões "Novo" e "Excluir"
• Tela de Cadastro de um Novo Torcedor (torcedorNew.html)
• Utilizar todas as tags de formulários do HTML 
• Botões "Salvar", "Limpar" e "Voltar"
• Tela de Cadastro de um Torcedor já existente (torcedor.html)
• Igual à tela de novo, porém, preenchida.
• Botões "Salvar", "Excluir", "Limpar" e "Voltar"
• Linkar todas as telas com hiperlinks.

Ganha o time que apresentar os melhores trabalhos, com melhores resultados visuais e criatividade.

13.03.2012 - ter - 3a. semana

HTML:

• http://pt-br.html.net/tutorials/html/
• Finalizar formulários HTML
• Quizz HTML

CSS:

• http://www.w3schools.com/css/default.asp
• http://pt-br.html.net/tutorials/css/ 

08.03.2012 - qui

Finalizar os 2 trabalhos pendente e publicá-los no SIGA.

HTML, XHTML e XML: até dia 10/03
Tableless: até dia 13/03

Dica para Tableless:
http://www.consultsarath.com/contents/articles/KB000013-tableless-layouts-using-floating-div.aspx

06.03.2012 - ter - 2a. semana

Material para a aula:

• Introdução ao HTML
• http://www.w3schools.com/html/html_intro.asp
• Tags HTML
• http://www.w3schools.com/html/html_elements.asp
• Formulários em HTML
• http://www.w3schools.com/html/html_forms.asp
• Layouts em HTML
• http://www.w3schools.com/tags/tag_table.asp
• http://www.w3schools.com/tags/tag_div.asp
• Links úteis:
• http://validator.w3.org/#validate_by_uri (HTML validator)
• http://www.w3schools.com/tags/ref_colornames.asp (Color names)
• http://www.w3schools.com/tags/ref_ascii.asp (ASCII reference)
• http://www.w3schools.com/tags/ref_httpmessages.asp (HTTP Status messages)
• http://www.maujor.com/tutorial/divmania.php (DIV tips)

Exercícios:

1) Modelar em HTML

2) Modelar em HTML

3) Modelar em HTML, utilizando a tag <ul><li></li></ul>

4) Modelar em HTML a tabela abaixo:

5) Modelar o formulário de cadastro abaixo em HTML