Em jQuery - como já vimos aqui e aqui, temos animações que podemos usar nos projetos: slideUp, slideDown, slideToggle, fadeIn, fadeOut e fadeTo, além de show e hide. São efeitos simples que você pode utilizar em qualquer lugar, e suas nomenclaturas também sao simples a ponto de serem intuitivas na hora do serviço de fato.

Slide

Que tal experimentar fazer uma área onde o usuário clica em um botão de mostrar/ocultar menu? Com apenas duas tags, a jQuery consegue executar essa tarefa.

Tomemos a seguinte marcação:

1
2
3
4
5
6
7

<div>
&lt;!--
Aqui vem a área, que você pode manipulá-la como quiser,
experimente um formulário de login ou um menu inline ou uma
bela imagem.
--&gt;
</div>

Apenas com HTML e CSS fazemos a versão que funcionará sem javascript. Pense sempre dessa forma, assim você não corre o risco de fazer javascript obstrusivo. É por isso que não foi colocado o link onde o usuário clicará para aparecer e sumir com a área. Veja como ficará este exemplo estilizado com apenas com algumas linhas de código de CSS.

Feita a primeira e a segunda camada (conteúdo feito no HTML e apresentação feita no CSS) partimos para a interação, que quem comanda é a jQuery. Primeiro, precisamos adicionar o link onde o usuário poderá clicar para fazer a área sumir e reaparecer, faremos isso dinamicamente com a ajuda do nosso Framework preferido. Com o método after (depois em inglês) adicionamos facilmente o nosso link.

1

$('#area').after('<a id="mostra-esconde-area" href="#area" title="Mostrar/Esconder Área">Mostrar/Esconder Área</a>')

Após isto, só precisamos adicionar a animação ao nosso botão, fazendo ele animar a área desejada. Com o comando toggle, nem precisamos nos preocupar com o estado no qual a área se encontra, afinal, ele vai aparecer e desaparecer conforme o necessário.

1
2
3

$('#mostra-esconde-area').click(function(){
$('#area').slideToggle()
})

Não esqueça que estes comandos devem estar dentro da função de inicialização da jQuery. Então o script final ficará assim.

1
2
3
4

$(function(){
$('#area').after('<a id="mostra-esconde-area" href="#area" title="Mostrar/Esconder Área">Mostrar/Esconder Área</a>')
$('#mostra-esconde-area').click(function(){ $('#area').slideToggle() })
})

Ao todo para fazermos a animação e a interação, não gastamos mais que cinco linhas de código javascript. Veja no exemplo final (ou com pouco CSS), como esse tipo de interação pode dar um gás na sua aplicação.

Opacidade

Uma outra propriedade que a jQuery trabalha e que pode resultar em ótimas melhorias na usabilidade do usuário é a propriedade opacity. Ou seja, a transparencia dos elementos, e graças aos métodos fadeIn, fadeOut podemos fazer um tooltip com poucas linhas de código.

Primeiro, escrevemos o HTML necessário. Sempre pensando de forma não obstrusiva, ou seja, se o navegador do usuário não tiver javascript habilitado, ele não deve ter sua navegabilidade atrapalhada.

1
2
3
4

<ul>
  <li><a href="google.com" title="Encontre o que você procura">Google</a></li>
  <li><a href="tableless.com.br" title="Webstandards com Feijão e Farofa">Tableless</a></li>
</ul>

Com algumas linhas de CSS aplicamos uma interface interessante para nosso menu. Para a construção usamos o atributo title, assim o usuário que não estiver com o javascript habilitado poderá navegar no site vendo todos os recursos que ele teria se o javascript estivesse habilitado.

A primeira tarefa da jQuery é criar um span onde vamos colocar o mesmo texto do atributo. Não podemos manipular o atributo title, ele fica com o padrão do sistema operacional do usuário, já um span podemos implementar o que nossa imaginação mandar, até mesmo criar balões colocando backgrounds, se necessário.

Para fazer isso, precisamos usar o método each, que percorre todos os elementos chamados aplicando a cada um uma diretiva específica.

1
2
3
4

$('#menu li a').each(function(){
  $(this).append('<span>'+this.title+'</span>')
  this.title=''
})

No método each nós passamos uma função, nessa função, a palavra-chave “this” indica o item que está sendo tratado pelo each (um de cada vez), ou seja, cada link específico. A cada link appendamos, ou seja, adicionamos ao fim de seu conteúdo o valor de seu atributo title dentro de uma tag span. Depois, limpamos o valor de seu title. Assim, removemos o tooltip original, deixando apenas o que será aplicado nos próximos passos.

Agora, a mágica. Adicionamos aos links a ação de hover que irá exibir seus filhos (o span que acabamos de adicionar) e ao mesmo tempo adicionamos a ação de sumir quando ele sair, fazemos isso com o próprio hover. Poderiamos fazer isso com os métodos show, hide ou mesmo o toggle, mas para ficar mais interessante para o usuário, resolvi usar fadeIn e fadeOut. Veja que mesmo assim, o código não fica tão impossível de entender.

1
2
3
4
5

$('#menu li a').hover(function() {
  $(this).children().show()
},function(){
  $(this).children().hide()
})

Enfim, aplicamos estes dois trechos de script ao nosso “inicializator-jquery” que fará com que esse script seja executado apenas após carregar a página, ou seja, quando todos os elementos já tiverem sido carregados. Também adicionamos ao CSS algumas linhas de código para deixar o tooltip amigável. Veja como é muito interessante esse efeito, agora com o nosso novo tooltip.

A jQuery manipula muito bem efeitos simples (mas que resolvem a esmagadora quantidade de problemas) que muitas bibliotecas insistem em deixar confuso demais ou complexo demais por adicionar mais e mais configurações para cada efeito. Por isso jQuery é uma ferramenta muito poderosa.

• Navegando com a jQuery
• Vídeos, Wordpress, Internet Móvel e mais
• jQuery é bom para designers
• Palestras da Visie
• 10º Encontro Locaweb de Profissionais de Internet

Faz tempo que o Tableless deixou de ser um site só de tutoriais. Queremos tratar de coisas mais nobres aqui. Claro, nosso objetivo é ensinar, e fazemos muito isso, veja na página Aprenda, no Campus Online, e por todo o site do Tableless. Temos conteúdo de sobra. Mas o que me preocupa não é tanto o nosso nível técnico, mas o tesão que nós sentimos pela profissão, pelo assunto. Já disse várias vezes que tesão não é só para sexo.
Durante muito tempo eu tenho testemunhado durante minhas aulas e palestras a quantidade de profissionais que estavam ali porque o chefe mandou ou porque chegou até aquela palestra porque a empresa pagou. Simplesmente falta interesse, e sem interesse, não há curiosidade. O resto você já sabe.
Por isso, que não quero tratar apenas sobre tutoriais e apostilas, mas também sobre mercado, metodologias, idéias, produtividade. É discutir sobre a profissão no brasil. É aprofundar mais o conhecimento de como construir sites utilizando os Padrões em pequenas, médias e grandes empresas. É entender quais são os obstáculos dos Padrões Web aqui no Brasil e ajudar.

Todos sabem que eu sou sócio da Visie, juntamente com o Elcio. Este ano haverá muito jabá nosso aqui, os puristas e arranjadores de problemas que se preparem. Nós desenvolvemos um lugar muito bacana chamado Campus Online. Alguns de vocês já conhecem. Ele será nosso “servidor de vídeos”. Aqui no Tableless haverá um vídeo por dia, grátis, que será puxado do Campus Online. Fizemos um script para que você possa colocar no seu site se quiser, segue abaixo:

<script src="http://visie.com.br/campus/ajax/480.js" charset="utf-8"></script>

Ali onde tem o número é a largura do vídeo. Ele puxará o vídeo e as informações como título e descrição. Assim como aparece na home do Tableless.

Aproveitei tudo isso para colocar no Tableless o Wordpress 2.7, que está um chuchuzinho. Fizeram muitas, mas muitas alterações no design e em algumas Template Tags.
Existem centenas de posts aqui do Tableless que são bem antigos. Vou levar muito tempo para organizá-los. Muitos deles são da época de antes do Wordpress, e precisam ser categorizados e tagueados. Isso é importante para que os posts relacionados funcionem perfeitamente e que você consiga achar mais conteúdo navegando pelo site.

Há muitas mudanças que precisamos fazer ainda, mas essas vou deixar pra fazer com mais calma e sem sono. Por agora, sua opinião será muito importante e se houver qualquer sugestão, por favor, me diga.

Que em 2009 você fique sem fôlego.

Os usuários de IE6 que me desculpem, mas eu não irei mais dar suporte a este navegador aqui no Tableless. Se quiser ver o site da melhor maneira possível, tente utilizar um browser decente como Firefox, Opera ou Safari.

• Firefox 1.5.0.5 e Flofox Theme
• Semana da Mobilidade
• Opera Mini 3.0
• Redhat Tableless!
• ColorZilla

Essa minha iniciativa me gerou um conhecimento terrível sobre o assunto. Eu sabia muito bem o que funcionava e o que deixava de funcionar em diversos tipos de layouts. Eu descobri que TUDO é possível com CSS, em uma época que todo mundo falava que ele era limitado.
A maior parte dos problemas que eu enfrentei de compatibilidades de browsers em layouts em projetos de clientes, eu já tinha solucionado nos layouts que implementei nos estudos. E isso foi ótimo. Eu me valorizei como profissional, e depois até me chamavam de especialista… Veja só que honra. Tudo isso, porque eu não fiquei de nhê nhê nhê como alguns por aí.

Como programar, implementar XHTML/CSS também é de graça! Não tem desculpa.
Não há nada que te impeça de sentar o bundão na cadeira e escrever código. Nada.
Mas aí você pode dar a desculpa de: “- Naquele tempo nenhum site era escrito nos padrões, hoje todos são Tableless!” E eu digo: “- E daí?”.
Será que são escritos de forma semântica? Será que não tem muito código? Não há solução melhor?

A minha revolta aqui é contra aqueles profissionais que não fazem questão de aprender mais. Que simplesmente fazem apenas o que mandam e não tem o desejo de mudar o mundo em nenhum sentido.

• Não “otimize” seu código
• Formulário Básico em 8 minutos - Tableless form
• Informação e Formatação; As duas camadas de desenvolvimento web
• Fiat Uno e Peugeot 206
• O que é Tableless?

Aconselhamos que você assista esse vídeo em Fullscreen.

Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas.

• Bonito de se ver #3
• 24 ways to impress your friends
• Wallpapers
• Webinsider
• WinXP em Tableless

Suporte da Apple

A Apple tem uma característica muito interessante: ela cuida do que é dela.
Melhor: ela não deixa você fazer besteira. Ela te dá informação para que você saiba exatamente como fazer algo para os sistemas e aparelhos dela.

Quando migrei para o mac, a primeira coisa que percebi foi a beleza do sistema. Os ícones são belos, agradáveis de ver. A área de trabalho do Mac, mesmo com uma infinidade de arquivos, fica bonita. Ao contrário dos ícones do Windows, eles são feios, e os de programas de terceiros, são piores ainda.
Já os ícones de programas de terceiros da Apple são lindos. Não, não é só porque eles querem um ícone bonitinho, mas é porque a Apple dá suporte aos designers. A Apple publica artigos, guias e manuais sobre como fazer um ícone para o Mac OSX. Isso faz a diferença. Se você quiser fazer um ícone para a Apple, você vai encontrar bastante material para fazer um ícone bonito, padronizado. Claro que um bocado de talento também conta.

A Apple está fazendo a mesma coisa para o desenvolvimento web. Você tem toda a informação que precisa sobre a plataforma, dispostivo, sistema instalado no aparelho, etc…
Por exemplo, você tem informações detalhadas sobre o Safari para desktop e para o iPhone. Tem detalhes sobre quanto eles conhecem de CSS e Javascript. Você sabe que o AJAX vai funcionar e que o Flash não. E todas os outros pequenos detalhes importantes para desenvolver um site para Internet Móvel.

Até hoje o Internet Explorer para o Windows Mobile é um segredo para mim. Eu não sei ao certo o que ele entende de verdade de CSS e quais os seus bugs. Diferente do MobileSafari. A Apple disponibilizou informações essenciais sobre o browser. E ainda mais, ela publicou exemplos, bibliotecas de javascript, exemplos de designs, scripts, css, tudo. E isso é ótimo, porque você não tem que ficar quebrando a cabeça. Não precisa fazer testes e mais testes para descobrir o que o browser aceita ou ignora.

O MobileSafari

Já falei sobre o MobileSafari aqui. A Apple fez um grande trabalho com o MobileSafari. Ele é um browser incrível, suporta coisas que nós, desenvolvedores, queremos fazer em sites para desktops, mas não podemos por causa do IE. Borda arredondada? Background em Checkbox? Customização de Selects (combobox)? Tudo isso é possível fazer com o MobileSafari.

Os browsers para dispositivos móveis são poucos hoje. Se resumem em: Opera, Internet Explorer e MobileSafari. O miniMO da Mozilla está andando devagar. E foi lançado à pouco um browser chamado SkyFire. Parece que esse browser tem futuro, tem um bom suporte a Flash, CSS e etc… Mas é pesado. Está em fase beta e tem um futuro muito promissor.

O Opera hoje é um dos browsers mais usados e quem tem WinMo sempre utiliza o Opera Mobile. Fora do iPhone, ele é o melhor browser para o seu dispositivo.

O interessante de desenvolver para iPhone é que você está desenvolvendo para apenas um dispositivo. Você não precisa se preocupar com uma infinidade de browsers, dispositivos e tudo mais. Você precisa se preocupar em fazer funcionar no MobileSafari. Isso é fantástico. Mesmo assim, você tem que pensar nos outros públicos que utilizam outros sistemas e browsers.

Um assunto interessante é estudar sobre o motor de renderização do seu browser. Você sabe qual o motor de renderização do IE? E do Opera?
O motor de renderização do Safari é o WebKit, que é utilizado também em browsers da Nokia e no Konqueror do KDE. Logo, você sabe que esses browsers tem um bom suporte a CSS, JS, Ajax. Mas esse é assunto para outro post.

• Browsers para Mobile - Nova era
• O que é Tableless?
• Não “otimize” seu código
• O Chrome não quer dizer muita coisa
• Browsers - Guerra Fria

Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas.

• Vídeo: Menu horizontal com CSS em 5 minutos
• Layout Fixo / Fluido de 3 colunas em 8 Minutos
• Formulário Básico em 8 minutos - Tableless form
• Centralizando um objeto na Horizontal e Vertical com CSS
• Video Tutorial #10 - Implementação de layout

Há várias maneiras de organizar os arquivos CSS de um site. Há sites que não precisarão de vários arquivos, bastando apenas um. Para estes devemos apenas ter cuidado com o código. Deixando-o simples e legível. Sempre tomando cuidado com a quantidade de linhas e código desnecessário. A estrutura seria mais ou menos essa:

Grandes portais e sites com uma visitação extrema, podem querer otimizar esse código. Isso é considerável apenas para estas excessões. O preço da banda é alto e qualquer 1Kb que economizarem será um caminhão de dinheiro que economizarão. Para sites pequenos, e até mesmo alguns sites de médio porte, na minha opinião, não é necessário haver uma “otimização de código“.

Se você perceber que as páginas são muito diferentes uma das outras e que o código está aumentando descontroladamente, é muito aconselhável você dividir o código CSS para cada padrão de página. Isso ajuda a controlar o tamanho do código e permite que você modifique uma parte do site sem interferir em outras páginas.

Essa opção é ótima para um site que tenha várias seções e cada seção tem um design diferente. Há um inconveniente: o código dentro do HEAD pode ficar enorme com tantas tags de LINK importando os arquivos de formatação. Para mudar isso, você pode fazer duas coisas: a primeira é fazer um arquivo CSS que importe todos os outros arquivos e linkar no HEAD apenas este arquivo.

Com essa primeira opção, o browser ainda carregará todos os arquivos CSS de uma vez. Pode ser que o carregamento fique pesado.
Por isso, há uma segunda opção que é conversar com seu programador para que ele faça uma mágica onde o site carregue apenas o arquivo CSS relativo àquela página. Quando visitamos a página interna, não é necessário carregar o arquivo CSS da HOME, por exemplo. Essa mágica previniria isso.

Outras pessoas preferem separar todo o código CSS em dois arquivos. Um arquivo conterá apenas informações de cor e fonte. E no outro arquivo haverá apenas informações sobre a estrutura do site: largura, altura, tamanho, margin, padding, position, float, etc.
Essa maneira é ótima para caso você quiser dar ao usuário opções de cores. O programador pode fazer um javascript maneiro que permita o usuário clicar e mudar a cor. O designer prepara vários CSS com regras de cores diferentes. A estrutura pode continuar a mesma, mas a paleta de cores muda. A mesma coisa pode-se fazer com a estrutura. A cor continua, mas a estrutura pode ser alterada de acordo com a opção do usuário.

Essas seriam as formas mais comuns de organizar seu CSS. Perca um bocado de tempo planejando essa estratégia. Se o site é muito grande, esse tipo de planejamento prévio pode salvar o projeto. Vale a pena a equipe definir padrões desenvolvimento. O CSS é um dos fatores definitivos para manutenção, velocidade e compatibilidade do site. Um CSS fora de controle é um pesadelo que você não quer ter.

• Implementar XHTML/CSS é grátis
• Não “otimize” seu código
• Tabelas semânticas
• O Safari para iPhone - Desenvolvimento web para iPhone
• Formulário Básico em 8 minutos - Tableless form

O código era o grande problema. A quantidade de código interferia diretamente na performance do site. E isso fez com que os desenvolvedores encontrassem saídas não muito agradáveis.

Era comum fazer códigos como o de baixo:

1
2
3
4
5
6
7
8
9
10

<table>
 <tr>
   <th>Produto</th>
   <th>Preço</th>
 </tr>
 <tr>
   <td>Tênis</td>
   <td>R$230</td>
 </tr>
</table>

Se transformarem em verdadeiros monstros:

<table><tr><th>Produto</th><th>Preço</th></tr><tr><td>Tênis</td><td>R$230</td></tr></table>

Isso tudo para economizar alguns bytes, que dependendo do site, significavam teras e teras de banda por mês. Naquele tempo, fazer isso era totalmente justificável. Precisávamos de alguma forma diminuir esse código para que o site ficasse mais rápido para o usuário e as requisições não sobrecarregassem o servidor.

Hoje isso é totalmente dispensável.

Aprendemos a utilizar o CSS e sabemos escrever HTML semântico.
A utilização dos Padrões trazem uma série de vantagens, e uma grande parte dessas vantagens são por causa da diminuição do código. Com o desenvolvimento de camadas e principalmente por causa do uso do CSS, não precisamos mais “otimizar” o código.

Mas parece que os desenvolvedores gostam de coisas complicadas. Esse mal costume de otimização de código ainda existe, e hoje querem otimizar o CSS. Eu acho totalmente inútil. O CSS foi feito para controlar o visual do site inteiro. Ele tirou a responsabilidade de formatação que colocávamos no HTML. Seu trabalho é exclusivamente esse: controlar o visual e diagramação do site.
É normal ele ficar grande, enorme, bizarro! Sim, haverão alguns casos que o tamanho superará mais de 1000, 2000, 3000, 4000 linhas.
Dá para evitar? Claro que dá! Pense simples. Module os arquivos. Faça um planejamento. Mas NUNCA faça com que um CSS escrito assim:

1
2
3
4
5
6
7

div {
 padding: 10px;
 border: 1px solid #CCC;
 width: 485px;
 height: 37px;
 background: #EEE;
}

Fique assim:

1

div{padding:10px;border:1px solid #CCC;width:485px;height:37px;background:#EEE}

Tenha dó do seu próximo e tenha dó de você mesmo.

Se você escreve o código de acordo com os Padrões, já economizou código suficiente. Não prejudique a manutenção do site por conta dessa neura. Escreva código legível!

Há outro ponto que devemos levar em consideração: imagine que o site pese 40Kb. Estes 40Kb são compostos por 20Kb de CSS e 20Kb de HTML. O CSS tem uma característica interessante: ele é cacheado pelo browser quando visitante entra no site.
Na primeira visita do usuário ele baixará 40Kb de uma vez. Já na segunda visita ele baixará apenas 20Kb relativos ao HTML. Ele não precisará baixar os 20Kb de CSS porque o arquivo já está cacheado pelo browser.

Não “otimize” seu código CSS, nem seu código HTML. Faça apenas com Padrões Web e siga categoricamente a semântica. É a melhor otimização que você pode conseguir.

O Leonardo Caineli escreveu um artigo sobre isso. Claro, discordo da opinião dele.

[update]Depois do post o pessoal chamou a atenção para essa prática em empresas grandes. Notei que no post eu não falei nada sobre isso. Sim, concordo que essa prática, só nessa hipótese, é totalmente considerável.

Quando treinei a primeira equipe do Terra - da época do site laranjão, lembra-se? - a primeira coisa que eles fizeram foi converter a home, e eles ainda sim queriam colocar todo o CSS em apenas uma linha.

Realmente 1Kb multiplicado por milhões é coisa para caramba e não há banda que agüente. Por isso, é totalmente aceitável que sites com um porte muito grande, “otimizem” seu código. [/update]

• O Caminho Suave para o Tableless
• Implementar XHTML/CSS é grátis
• Tabelas semânticas
• Informação e Formatação; As duas camadas de desenvolvimento web
• Escrevendo um XHTML válido

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table>
<tr>
<td>Produto</td>
<td>Descrição</td>
<td>Valor</td>
</tr>
<tr>
<td>Tênis</td>
<td>Tênis com amortecedor, tecido vermelho com cadarço preto.</td>
<td>R$350,00</td>
</tr>
<tr>
<td>Camiseta</td>
<td>Tamanho GG, cor preta e uma estampa nas costas.</td>
<td>R$55,00</td>
</tr>
<tr>
<td>Calça</td>
<td>Tecido Jeans, azul claro, com botão duplo.</td>
<td>R$105,00</td>
</tr>
</table>

Para nós que enxergamos bem e conseguimos fazer uma breve interpretação de texto, conseguimos entender na maioria das vezes qual o assunto das tabelas na página.

Mas e o Google? E o leitor de tela do cego?

Por isso, a tabela tem algumas tags que ajudam o desenvolvedor a dar mais informação sobre o conteúdo daquela tabela.

Há algumas tags que iremos acrescentar em nossa tabela para dar essa informação extra ao visitante, seja ele ser humano ou robô.

SUMMARY - Dizendo do que se trata a tabela

O atributo summary é colocado na tag TABLE. Ela serve para indicar do que se trata aquela tabela, dizendo sua utilidade e que tipo de informação está descrevendo.

1

<table summary="Lista de produtos em promoção">

TH - Table Header

Considerando o código que colocamos mais acima, há os títulos de células PRODUTO, DESCRIÇÃO e VALOR. Esses títulos, devem ser destacados como título, não apenas modificando seu visual pelo CSS, mas também destacando-os pelo código. Para fazermos isso, iremos utizar a tag TH.

Essa tag irá indicar que tais células são títulos. O nosso código ficará assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table summary="Lista de produtos em promoção">
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
<tr>
<td>Tênis</td>
<td>Tênis com amortecedor, tecido vermelho com cadarço preto.</td>
<td>R$350,00</td>
</tr>
<tr>
<td>Camiseta</td>
<td>Tamanho GG, cor preta e uma estampa nas costas.</td>
<td>R$55,00</td>
</tr>
<tr>
<td>Calça</td>
<td>Tecido Jeans, azul claro, com botão duplo.</td>
<td>R$105,00</td>
</tr>
</table>

THEAD - Cabeçalho da Tabela

Normalmente as tabelas tem sempre uma linha de títulos, como a nossa tabela acima. Precisamos informar então, que essa linha é um cabeçalho, que contém os títilos das colunas ou linhas. Para isso, envolveremos a TR que contém as THs com a tag THEAD. Nosso código ficará dessa forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<table summary="Lista de produtos em promoção">
<thead>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</thead>
<tr>
<td>Tênis</td>
<td>Tênis com amortecedor, tecido vermelho com cadarço preto.</td>
<td>R$350,00</td>
</tr>
<tr>
<td>Camiseta</td>
<td>Tamanho GG, cor preta e uma estampa nas costas.</td>
<td>R$55,00</td>
</tr>
<tr>
<td>Calça</td>
<td>Tecido Jeans, azul claro, com botão duplo.</td>
<td>R$105,00</td>
</tr>
</table>

TFOOT - Indicando o rodapé da tabela

Logo após o THEAD, iremos indicar quais informações irão no rodapé do documento, utilizando a tag TFOOT. Aqui, iremos colocar as mesmas informações do THEAD, supondo que a tabela é muito grande e queremos que o usuário, ao chegar no rodape, não se perca com a identificação das colunas. Nosso código fica assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<table summary="Lista de produtos em promoção">
<thead>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</tfoot>
<tr>
<td>Tênis</td>
<td>Tênis com amortecedor, tecido vermelho com cadarço preto.</td>
<td>R$350,00</td>
</tr>
<tr>
<td>Camiseta</td>
<td>Tamanho GG, cor preta e uma estampa nas costas.</td>
<td>R$55,00</td>
</tr>
<tr>
<td>Calça</td>
<td>Tecido Jeans, azul claro, com botão duplo.</td>
<td>R$105,00</td>
</tr>
</table>

TBODY - Indicando o corpo da tabela

Se há um cabeçalho e um rodapé na tabela, é mais do que normal haver um BODY, apresentando as informações que de fato interessam ao usuário.
O TBODY deve ir logo após a tag TFOOT. Sinceramente, não sei porque a tag TFOOT não vem após a TBODY, já que é o código de Rodapé. Se você souber, por favor, me diga!

Nosso código fica dessa forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<table summary="Lista de produtos em promoção">
<thead>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tênis</td>
<td>Tênis com amortecedor, tecido vermelho com cadarço preto.</td>
<td>R$350,00</td>
</tr>
<tr>
<td>Camiseta</td>
<td>Tamanho GG, cor preta e uma estampa nas costas.</td>
<td>R$55,00</td>
</tr>
<tr>
<td>Calça</td>
<td>Tecido Jeans, azul claro, com botão duplo.</td>
<td>R$105,00</td>
</tr>
</tbody>
</table>

CAPTION - Título do Cabeçalho

A tag CAPTION define um título para o cabeçalho da tabela. Esse título vai apresentar a tabela para o usuário. Ele deve ser colocado logo antes da tag THEAD e logo após tag TABLE.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<table summary="Lista de produtos em promoção">
<caption>Produtos em Promoção</caption>
<thead>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Produto</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tênis</td>
<td>Tênis com amortecedor, tecido vermelho com cadarço preto.</td>
<td>R$350,00</td>
</tr>
<tr>
<td>Camiseta</td>
<td>Tamanho GG, cor preta e uma estampa nas costas.</td>
<td>R$55,00</td>
</tr>
<tr>
<td>Calça</td>
<td>Tecido Jeans, azul claro, com botão duplo.</td>
<td>R$105,00</td>
</tr>
</tbody>
</table>

Já com essas tags diferenciadas, o trabalho que teríamos para formatar o cabeçalho, título e conteúdo da tabela ficou mais leve. Em vez de colocar class em tudo quanto é TR para diferenciar as partes da tabela, conseguimos formatar cada um desses grupos sem encostar no código HTML. Claro, que se você quiser fazer algo mais rebuscado, a modificação do código HTML será inevitável. Mas, com esse pouco código que escrevemos, já procrastinamos essa necessidade.

• Não “otimize” seu código
• Implementar XHTML/CSS é grátis
• Modulando o CSS
• O Caminho Suave para o Tableless
• Escrevendo um XHTML válido

Esse exercício está disponível gratuitamente no Campus Online também, em texto e em vídeo na parte de Tableless!
http://visie.com.br/campus/

A idéia é implementar esse layout utilizando CSS e XHTML. O layout, como já disse, é bem básico, indicado para o pessoal que está começando agora na área ou que migrou de desenvolvimento com tabelas para desenvolvimento CSS/XHTML.

Nesse exercício o camarada vai utilizar as propriedades: margin, padding, line-height, background, colocar, font, clear e float. Além de fazer menu horizontal e e formulários.

Tem um vídeo, para os assinantes pagantes, com a implementação do HTML e outro vídeo com a implementaçãodo CSS em cima deste HTML. Assim o camarada pode comparar o seu exercício com o do vídeo.

• Palestras da Visie
• Curso de Tableless Visie
• Curso de Tableless e Ajax
• Implementar XHTML/CSS é grátis
• Não “otimize” seu código