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.
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.
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 |
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.
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
Siga-me no Twitter, Facebook, LinkedIn ou Instagram.
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...
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.
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
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!
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!
"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!
Que trato mais imbecilizante, heim?
Amargo não é a mudança de paradigma mas sair da acomodação.
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
hmmm.. não está correto o link para os slides !!
nao participei da sua palestra.. mas parece q foi bem interessante ! parabéns !!
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/
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.
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
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
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.
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...
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! :]
Assine nosso conteúdo e receba as novidades!
Atualizado com o Movable Type.
Alguns direitos reservados por Frederick van Amstel.
Apresentação do autor | Website internacional | Política de Privacidade | Contato