1) Escolha duas dentre bibliotecas listadas no resumo a seguir ou procure por alguma biblioteca na Internet:

http://www.brunocampagnolo.com/2009_2/js/libs

Antes de escolher sua biblioteca verifique se alguém já não a escolheu no link abaixo:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdFNrRk5VclFZUnBiMlFUVmRhT1VKTHc&hl=pt_BR

É essencial que cada aluno use uma biblioteca diferente.

Selecione sua biblioteca no link abaixo:

http://spreadsheets.google.com/viewform?formkey=dFNrRk5VclFZUnBiMlFUVmRhT1VKTHc6MA

2) Para cada biblioteca, crie uma página HTML sobre ela, citando:

* Nome;

* Criador;

* Ano de criação;

* Versão;

* Link;

* Descrição do que faz a biblioteca;

* Licença;

* Preço;

* Compatibilidade com navegadores;

* Tamanho (KB);

* Performance;

* Exemplo de sites que utilizam e links relacionados;

* Requisitos para instalação e dependências;

* Passos para instalação;

* Pelo menos 3 exemplos DE CÓDIGO BEM COMENTADOS;

O primeiro exemplo, pode ser igual a um exemplo já fornecido pela biblioteca.

O segundo exemplo deve ser inédito.

Seu terceiro exemplo também deve ser inédito e usar também outra biblioteca qualquer a sua escolha. Por exemplo, se você escolheu uma biblioteca de zoom, faça um exemplo com ela e com mais uma outra biblioteca qualquer.

3) Você deverá apresentar seu segundo exemplo no dia 1 ou 2/12.

ENTREGA VIA EUREKA, EM PASTA CRIADA NO MÓDULO CONTEÚDO E VIA CORREIO ATÉ O DIA 31/11 (01/12, pela manhã).

Deixe seu exemplo público, para que seus colegas também possam vê-lo!

Chegamos a nosso último tópico!

Segue, abaixo e no link.

O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.

Apresentação referente à aula

Exemplos utilizados na aula:

• Layout de 2 colunas líquido
• Layout de 3 colunas líquido
• Formulário com TABELAS (sem CSS) – 1
• Formulário com TABELAS (sem CSS) – 2
• Formulário com TABELAS (sem CSS) – 3
• Formulário com alteração das bordas
• Formulário com alteração de bordas (correto)
• Formatando label, fieldset e legend
• Layout baseado em tabelas
• Layout baseado em parágrafos
• Layout baseado em listas
• Relembrando formatação de links
• Relembrando formatação de listas
• Exemplo de rollover com 2 imagens
• Exemplo de rollover com 1 imagem
• Exemplo de menu vertical

Imagens utilizadas nos exemplos:

Links para Layouts prontos em CSS:

• http://www.csseasy.com/
• http://layouts.ironmyers.com/
• http://www.code-sucks.com/css%20layouts/
• http://www.glish.com/css/
• http://www.intensivstation.ch/en/templates/

Links para frameworks CSS:

• http://www.blueprintcss.org/
• http://960.gs/
• http://developer.yahoo.com/yui/grids/
• http://delicious.com/bcp/css+framework

Links para geradores de layout:

http://developer.yahoo.com/yui/grids/builder/
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
http://builder.yaml.de/

Apresentação referente à aula

Trabalharemos na aula de hoje com as propriedades:

• float: determina o posicionamento de um elemento em relação ao fluxo;
• clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores;
• position: tipo de posicionamento de um elemento;
• width: largura de um elemento, obrigatório nos elementos com float;
• left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado;
• top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado;

Exemplos referentes à aula:

• Posicionamento padrão, sem float
• Exemplo de aplicação de float:left
• Exemplo de float left com problema com o contâiner pai
• Uso do clear left
• Exemplo com float right
• Exemplo com clear right
• Aplicando a propriedade clear both
• Resolvendo o problema do container pai usando spacer
• Usando mais de um float
• Usando mais de um float (sem spacer)
• Usando mais de um float com float right
• Posicionamento estático
• Posicionamento relativo
• Posicionamento absoluto
• Posicionamento absoluto + relativo
• Posicionamento fixo
• Exemplo de layout de 2 colunas
• Exemplo de layout de 3 colunas

Os exercícios não precisam ser entregues.
Serão cobrados APENAS no dia da defesa: 20 e 21/10/2009.

Não há entrega posterior do exercício!

Lembre-se: no máximo duplas.

Esta aula não possui material relacionado, retorne ao material da aula anterior para dúvidas.

Retorne à aula anterior para dúvidas referentes à sintaxe básica da linguagem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<form action="">
			<label for="nome">Nome:</label>
			<input type="text" id="nome" name="nome"><br>
			<label for="nascimento">Data nascimento:</label>
			<input type="text" id="nasc" name="nasc"><br>
			<input type="button" id="btConfirmar" value="Novo">
			<div id="listaContatos"></div>
		</form>
		<script type="text/javascript">

			var idContato = 1;
			var contatos  = [];
			var criarContato = function(pnome, pnascimento) {
			    var contato = { id: idContato++, nome: pnome, nascimento: pnascimento};
			    return contato;
			}
			var armazenarContato = function(contato,contatos) {
    			contatos[contatos.length] = contato;
			}
			var pesquisarContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, retorne este contato!
					if(contatos[i].id===id) {
						return contatos[i];
					}
				}
			}
			var excluirContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, elimine o contato!
					if(contatos[i].id===id) {
						contatos.splice(i,1);
					}
				}
			} 

			var incluirNovoContato = function () {
				var nome = document.getElementById("nome").value;
				var nascimento = document.getElementById("nasc").value;
				var contato = criarContato(nome, nascimento);
				armazenarContato(contato, contatos);
			}
			document.getElementById("btConfirmar").onclick = incluirNovoContato;

			// Código de Teste!
			/*
			arm = criarContato("Armando", "23/4");
			jam = criarContato("Jamanta", "22/5");
			cla = criarContato("Claudio", "23/6");

			armazenarContato(arm, contatos);
			armazenarContato(jam, contatos);
			armazenarContato(cla, contatos);
			*/

		</script>
	</body>
</html>

• margin-top, margin-right, margin-bottom, margin-left, margin: determina a margem de um elemento;

• padding-top, padding-right, padding-bottom, padding-left, padding: determina o “enchimento” (espaçamento) de um elemento.

• border-top-color, border-top-style, border-top-width, border-top, border-right-color, border-right-style, border-right-width, border-right, border-bottom-color, border-bottom-style, border-bottom-width, border-bottom, border-left-color, border-left-style, border-left-width, border-left, border-color, border-style, border-width, border: modifica a borda de um elemento.
• outline-color, outline-style, outline-width, outline: determina a linha de contorno ao redor de um elemento;
• height: modifica a altura da área de conteúdo de um elemento;
• min-height: altura mínima de um elemento;
• max-height: altura máxima de um elemento;
• width: largura da área de conteúdo de um elemento;
• min-width: largura mínima da área de conteúdo de um bloco;
• max-width: largura máxima da área de conteúdo de um bloco;

Seguem os exemplos associados à aula:

• Exemplo Margem Padrão;
• Exemplo Margin
• Exemplo Margin Auto
• Exemplo Margin Em
• Exemplo Margin Negativa
• Exemplo Margin Porcentagem
• Exemplo Margin Resumida
• Exemplo Margin Resumida2
• Exemplo Border
• Exemplo Border Específica
• Exemplo Border Resumida
• Exemplo Box Model
• Exemplo Padding
• Exemplo Width Height
• Exemplo CSS Sprite
• Exemplo CSS Sprite 2

Imagens usadas durante a aula:

Apresentação referente à aula (no link).

• letter-spacing: espaçamento das letras do texto;
• word-spacing: espaçamento das palavras do texto;
• line-height: altura das linhas;
• text-align: alinhamento horizontal;
• text-decoration: efeitos em texto;
• text-indent: distanciamento da 1ª linha do texto;
• text-transform: controla a capitalização do texto;
• text-shadow: especifica o efeito de sombra em um texto;
• vertical-align: alinhamento vertical;
• white-space: controla o espaçamento em branco em um elemento;
• direction: especifica a direção de escrita;
• writing-mode(CSS3/IE8): define a direção do texto;
• text-overflow (CSS3/IE6): permite aplicar (…) em um texto que não serve em um elemento.

Os exemplos referentes à aula são:

• Exemplo letter-spacing
• Exemplo word-spacing
• Exemplo line-height
• Exemplo text-align
• Exemplo text-decoration
• Exemplo text-indent
• Exemplo text-transform
• Exemplo text-shadow
• Exemplo text-shadow emulado (IE, Firefox, etc)
• Exemplo vertical-align
• Exemplo white-space
• Exemplo direction
• Exemplo writing-mode
• Exemplo text-overflow
• Exemplo text-overflow emulado (Firefox)

Download da apresentação

O objetivo da aula de hoje é trabalhar com as propriedades do CSS referentes a tipografia, ou seja, que permitem a alteração de fontes.

Exemplos da aula:

• Fontes;
• Personalidade das fontes;
• Exemplo serifa;
• Exemplo serifa2;
• Propriedade font-family;
• Famílias genéricas;
• Propriedade font-size;
• font-size absoluto;
• font-size relativo;
• font-size comprimento absoluto;
• font-size comprimento relativo;
• font-size comprimento absoluto 2;
• font-size porcentagem;
• Propriedade font-weight;
• Propriedade font-style;
• Propriedade font-variant;
• Representação resumida.

Sobre a “personalidade” diferente de cada fonte, sugiro os vídeos (humor, em inglês):

• Conferência das fontes;
• Luta entre fontes.

Download da aula

Assim, uma prática solução que podemos usar para implementar os seletores do CSS 2.1 no Ie6 e resolver alguns problemas do ie7 é o uso de uma biblioteca de “emulação” de recursos como, por exemplo, a ie7-js .Esta biblioteca exige que se use a linguagem JavaScript, desta forma, não é aplicável em todos os cenários.

Para “transformar” seu ie6 em ie7, cole o seguinte fragmento de código no início da página:

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js”

type=”text/javascript“></script>
<![endif]–>

Se precisar “transformar” seu ie6 e 8 em ie8, cole o seguinte fragmento de código no início da página.

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript“></script>
<![endif]–>

Independente do uso de qualquer biblioteca,verifique a tabela de compatibilidade para cada seletor em relação aos navegadores.

Segue, a seguir, os exemplos referentes à aula.

• Seletor universal (*);
• Seletor universal aplicado em CSS Reset;
• Seletor universal aplicado no debug do posicionamento dos elementos;
• Seletor filho (E > F);
• Seletor irmão adjacente (E + F);
• Pseudo-classe dinâmica hover (E:hover);
• Pseudo-classe dinâmica hover aplicada em links;
• Pseudo-classe dinâmica focus (E:focus);
• Pseudo-classe dinâmica focus aplicada em links;
• Pseudo-classe primeiro filho (E:first-child);
• Pseudo-classe lang (E:lang(C));
• Pseudo-elemento before (E:before);
• Pseudo-elemento after (E:after);
• Seletor atributo existente (E[atr]);
• Seletor atributo igualdade (E[atr=val]);
• Seletor atributo igualdade aplicado em itens de formulário;
• Seletor atributo espaço em branco (E[atr~=val]);
• Seletor atributo espaço em branco aplicado à classe;
• Seletor atributo prefixo (E[atr|=val]);
• Exemplo de uso da biblioteca ie7-js.

A seguir, faça o download da apresentação referente a aula (mirror).

Exemplos da aula:

• Seletor de elemento
• Seletor de classe
• Seletor de id
• Agrupamento de seletores
• Seletor contextual
• Pseudo-classe âncora (:link)
• Pseudo-classe âncora (:visited)
• Pseudo-classe âncora (:active)
• Pseudo-elemento letra inicial (:first-letter)
• Pseudo-elemento primeira linha (:first-line)
• Exemplo de “Classititis”
• Seletores no jQuery

Segue a seguir e no link a apresentação referente à aula.

A linguagem HTML possui um conjunto de tags que permite a interação com o usuário de um site tanto com o JavaScript quanto com o Servidor Web.

Sobre este tema, a leitura mais recomendada é a própria tradução da seção sobre formulários da recomendação para o HTML 4.01.

Abaixo, os exemplos tratados na aula:

• Resumo sobre todos os tipos de item de formulário;
• Exemplo de formulário simples;
• Exemplo de formulário simples;
• Exemplo de formulário mais elaborado;
• Componentes de formulário do HTML 4;
• Componentes de formulário do HTML 5 – Abrir com navegador Opera;

A apresentação referente à aula vai em anexo (mirror).

Além desta apresentação, também use como consulta o documento anexo, que detalha cada um dos diferentes tipos de item de formulário disponíveis.

Em HTML, as tabelas são construídas através das tags:

• Criação de contâiner de tabela: table;
• Criação de contâiner de linha: tr;
• Definição de célula: td, th
• Legenda: caption;
• Cabeçalho de tabela: thead;
• Corpo de tabela: tbody
• Rodapé de tabela: tfoot;
• Agrupamento de colunas: colgroup, col.

Os exemplos utilizados na aula são:

• Exemplos de tabelas simples
• Exemplos de tabelas organizadas em grupos de linhas
• Exemplos de tabelas organizadas em grupos de colunas
• Exemplo de uso de JavaScript para marcar uma linha clicada

Abaixo e em anexo, apresentação referente à aula.

Existem 3 tipos de listas: ordenadas, não-ordenadas e listas de definição.
Veremos futuramente que as listas não serão úteis apenas para a exibição listagem de itens, mas também serão úteis na criação de menus e barras de navegação.

Os links, por sua vez, são um dos principais elementos que justificam o sucesso da web.

Os exemplos utilizados nesta aula são listados abaixo (baixar todos – mirror).

• Listas em HTML e CSS
• Listas em JavaScript
• Links em HTML
• Links em HTML
• Links em CSS

As imagens usadas nesta aula são:

Segue a apresentação sobre a aula (mirror):

Atenção: os arquivos utilizados na aula devem ser descompactados em alguma pasta de seu computador!
Baixar aqui ou aqui.

Download da Apresentação da aula aqui ou aqui