Usabilidoido: Menu Principal

English Website


Tablelove: transição suave aos Webstandards

Ao invés de recomeçar do zero, é melhor ir mudando aos poucos.

Logo do Movimento Tablelove

Dois dias antes do 10º Encontro de Webdesign em Curitiba, a organização do evento me convidou para substituir meu amigo Bechara, que teve de ser operado no apêndice. Topei o desafio só porque esse assunto não poderia faltar no evento. É a mudança mais importante no rumo do Webdesign nos últimos anos e o mercado curitibano não poderia ficar de fora.

Quando comecei a preparar os slides fiquei pensando como eu iria dizer a 300 profissionais que muito do que sabiam sobre codificação HTML estava errado e que era preciso mudar. Se dissesse para esquercer as tabelas, como prega o discurso Tableless, certamente iria desanimar uns e revoltar outros. Se dissesse que eles precisariam conhecer todas as recomendações do W3C, desanimaria a todos.

Inspirado na transição suave proposta por Jeffrey Zeldman, propus o movimento Tablelove. As tabelas quebraram nosso galho por muito tempo enquanto não haviam alternativas para marcar layout. Passar a odiá-las de uma hora para a outra não é saudável nem para os webdesigners, nem para as tabelas.

Quem ama não abusa

O primeiro passo do Tablelove é transferir a formatação inline (embutida na própria tag) para um arquivo separado de CSS. Com as propriedades de formatação do CSS é possível fazer muito mais com muito menos. As tabelas aninhadas (uma dentro da outra) diminuirão e o spacers.gif transparente não serão mais necessários.

Só esse esforço de separação entre o conteúdo e a apresentação vai tornar a manutenção do código mais fácil e aumentar a acessibilidade da página.

Quem ama quer sempre o melhor

Originalmente as tabelas foram criadas para exibirem dados tabulados. Elas começaram a ser usadas para marcar layout porque não havia alternativa melhor na época, mas dessa forma estavam sendo mal tratadas. Eis um exemplo de tabela bem utilizada:

Fruto Cor Sabor
Banana Amarelo Doce
Maçã Vermelha, Amarela ou Verde Doce
Tomate Vermelho ou verde Salgado

Quem ama trai

Para substituir as tabelas na marcação do layout, é recomendável a utilização da tag DIV. Elas permitem posições mais flexíveis, precisas e ousadas. No CSS Zen Garden, um mesmo grupo de DIVs é rearranjado de centenas de formas diferentes para compor layouts impressionantes. Observe que o código HTML não muda, só muda a folha de estilos da página.

Áudio da palestra e slides

Os títulos sugestivos das lições do Tablelove ficam muito mais engraçados e memoráveis numa palestra ao vivo do que nesse texto. Para quem não estava no evento, segue o áudio da palestra que pode ser escutado junto com os slides.

Padrões Web (Webstandards) [MP3] 1h e 30 minutos 14MB


Dicas

Siga-me no Twitter, Facebook, LinkedIn ou iTunes.

Autor

Frederick van Amstel - Quem? / Contato - 18/09/2005

Palavras-chave

tablelove    tableless    webstandards    padrões    

Opções



Comentários

Discussão
Mikhael
18/09/05 às 18:16

e ae palestrante! ganhou os espectadores hein! tdo mundo achou q a sua foi a melhor palestra, e olha que eu perguntei pra um monte de gente...


Discussão
Lanna
18/09/05 às 19:18

Olah! Parabéns pela palestra, adorei a idéia do Tablelove (quem ama trai... com div! hahahah), e o assunto eh com certeza mto importante.


Discussão
Helena Francio
19/09/05 às 00:04

Olá, moço...
Estive no 10º EWD, e adorei sua palestra... principalmente o tablelove...
estava um pouco apreensiva por ter de usar somente css, mas estou adorando esse novo jeito de fazer as coisas, e me adaptando super bem!
continue assim, que você tá muito bem...
abraço


Discussão
Gil Melo
19/09/05 às 08:01

Olá Frederick!

Achei muito legal a tua palestra sobre Webstandards.

Claro que a partir de hoje vou tentar executar a terapia do "TABLELOVE", que apesar de fácil,
ensina a gente aos poucos esquecer das tabelas, e dos gif trasnparentes, e de tabelas dentro de tabelas... Hehehehehe....

Valeu camarada!


Discussão
Gilson
19/09/05 às 08:28

Bom Dia Guri!

Já fiz uns 60 sites e nos ultimos messes estava trabalhando com um pouco de CSS e um pouco com tabelas, mais depois deste sabado no encontro tenho certeza que só usarie CSS para dermarcar o layout.

Antes que eu me esqueça parabens não querendo despresar as outras palestras mais achei a sua uma das melhores.

Grnade abraço e fique com Deus!


Discussão
Sérgio Jardim
19/09/05 às 09:30

"Para substituir as tabelas na marcação do layout, é recomendável a utilização da tag DIV."

Fred, bom?
Só queria deixar aqui um lembrete: Cuidado ao se restringir ao DIV como substituto das tabelas. Pode parecer aos seus leitores recentes que ela é uma tag universal, que deve ser usada pra tudo.

Seria legal se você pudesse complementar o parágrafo assim citando a preocupação com a semântica, com o uso das tags certas para o 'trabalho' certo.

Abração!


Discussão
Diego
19/09/05 às 09:46

Que trato mais imbecilizante, heim?

Amargo não é a mudança de paradigma mas sair da acomodação.


Discussão
Newton Wagner
19/09/05 às 13:40

Gostei da idéia, você encontrou uma maneira diferente de transmitir os padrões, e pelo visto agradou. Qdo chegar em casa eu vou baixar os slides e ouvir a palestra. :D


Discussão
Vitor
19/09/05 às 14:40

hmmm.. não está correto o link para os slides !!
nao participei da sua palestra.. mas parece q foi bem interessante ! parabéns !!


Discussão
Davis Zanetti Cabral
19/09/05 às 15:00

Tablelove ficou legal.
Acho o termo "tableless" muito radical, a idéia não é acabar com as tabelas, mas sim usá-las de forma correta.

Viva o WaSP \o/


Discussão
Fred
19/09/05 às 15:34

Ainda bem que alguém avisou que o link estava quebrado... Agora está Ok, os slides estão aqui:

http://www.usabilidoido.com.br/padroes_web_webstandards.html

Sérgio, quanto ao uso de DIVs, eu explico melhor no áudio da palestra e deixo claro que eles devem ser usados para DIVidir o layout. Sinceramente acho difícil um iniciante entender o valor da Web Semântica, por isso não dei muita ênfase nisso.


Discussão
Victor Oliveira
20/09/05 às 17:36

Dae Fred, uehuhe finalmente te comprimentei pessoalmente =)

Como falaram, a tua palestra foi uma das melhores a tua e a outra também que deu uma passada em otimização de buscadores que achei bem interessante.
Parabéns pela palestra.

To começando a gostar de usar tablelove, mas to tendo problemas de alinhamentos entre os browsers etc... ta sendo um sufoco mas chego lá.
o legal é que quando to estressado vou mecher um pouco com formatação de css, é um joguinho de paciência bem bacana. =)

Abraço


Discussão
Diego Eis
16/10/05 às 03:45

Fred, uma coisa:
nós não pregamos para o desenvolvedor largar as tabelas de vez... muito pelo contrário, veja isso:
http://www.tableless.com.br/artigos/caminho.asp


Discussão
Fred
16/10/05 às 11:16

O que é um artigo suave perante dezenas de posts e mensagens em listas radicais? As mais radicais nem são as que você mandam, mas sim do pessoal que faz parte da comunidade Tableless. Quando aponto o site não estou falando do Diego e do Elcio, estou falando do movimento Tableless.

Porém, não acho isso ruim. Pelo contrário, assim como eu, centenas de desenvolvedores foram convertidos aos Webstandards graças à sedução do Tableless, promovido justamente por essas mensagens radicais.

O problema é que essa abordagem não é pra qualquer um. Não é todo mundo que tem tempo de ficar experimentando, correndo atrás de tutorial, lendo livros para mudar totalmente a forma como implementa websites.

A grande maioria dos desenvolvedores ainda não aderiu aos Webstandards, principalmente, porque parece muito custosa a conversão. Imagine, deixar de lado uma ferramenta tão produtiva como o Dreamweaver?

Na minha opinião, agora é o momento de espalhar os Webstandards para as massas e, para isso, é preciso enfatizar a abordagem suave em detrimento da radical.


Discussão
seu chara
04/12/05 às 21:09

Parabéns pelo site mas ta muito dificil compreender o q vc fala no podcast, "muito ruim o som" e chegando nos 10 minutos da vontade de parar de escutar... mas de qualquer forma parabens
desisti de escutar... me esforcei mas vc ta falando de longe e tem muito eco e ainda tem uns barulhos nos +ou- nos 9 minutos
achei muito interessente mas ta dificil...


Discussão
joh
19/07/06 às 18:36

cara.. ridiculo este esquema de tablelove! gay demais. outra, teu site não tem usabilidade, não é compatível e é confuso. sou do Rio mas fui no 10º encontro de Ctba pq estava fazendo um freela in loco na cidade e não gostei de sua palestra. vc devia fazer é palestra de mkt pessoal! :]




Comente.






(aguarde que é demorado mesmo...)


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato