Tableless - Desenvolvimento inteligente com Padrões Web

09/08/2005
Artigos

O que é Tableless?

A Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consórcio …

Por


A Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consórcio internacional, onde são desenvolvidas os padrões para a web (Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros.

Naquela época, no mercado de browsers, as opções ainda eram poucas: consistiam apenas em Lynx, Mozaic e Netscape Navigator, da Netscape Communications, então liderada por James Clark. A Microsoft, de Bill Gates, resolveu entrar nesse mercado lançando o Internet Explorer. A partir daí, o Netscape e o Internet Explorer começaram a travar uma guerra atrás de adeptos. A concorrência entre os dois browsers é chamada até hoje de Guerra dos Browsers. Durante essa “guerra”, os padrões do W3C ainda eram meros rascunhos. Por conta disso, as duas empresas que não podiam esperar que esses rascunhos ficassem prontos começaram a lançar seus browsers com padrões proprietários.

Agora o impasse: Os browsers tinham seus próprios padrões… Já os desenvolvedores não conseguiam criar um único código que funcionasse nos dois navegadores. Por este motivo, eles eram obrigados a desenvolver, na maioria das vezes, para apenas um browser.
Isso trouxe mais um problema, agora para os usuários. O usuário que usava Netscape, não conseguia acessar sites que eram feitos para Internet Explorer, e vice-versa.

Como a web não tinha sido projetada para desenvolver os criativos ambientes gráficos que temos atualmente, naturalmente, os recursos de desenvolvimento eram limitados e os criadores faziam das tripas coração para criar seus sites. Entre as muitas idéias que surgiram para ultrapassar ao ambiente de “apenas texto” da internet, estava aquela de utilizar tabelas de HTML para posicionar os elementos no layout, utilizando slices de imagem, gifs transparentes e a técnica de aninhamento de tabelas para contornar os problemas que os padrões proprietários traziam. A esse tipo de técnica, que foi usadapela maior parte dos websites, chamamos de layout com tabelas.

Os sites que seguem os Padrões Web utilizam uma metodologia de desenvolvimento baseado em 3 camadas, são elas:

  1. Informação – A informação do site é exibida utilizando código XHTML ou HTML.
  2. Formatação – O XHTML que exibe a informação é formatada com CSS (Folhas de Estilo). É com CSS que comandamos todo o visual do site. Tudo que é visual e decorativo deve ser feito por CSS.
  3. Comportamento – Definida por Javascript e AJAX. É a camada que define como os elementos irão se comportar de acordo com as ações do usuário.

Em poucas palavras: um site tableless é um site que não utiliza tables para a estruturação do Layout. É um site que segue os Padrões Web.
O termo “tableless” é usado mais largamente aqui no Brasil. Em outros países outros foram mais difundidos, por exemplo: CSS Layouts.

Um site tabeless segue obrigatoriamente regras de semântica. Cada tag tem sua função própria. Por exemplo, para criar um parágrafo de texto, usamos a tag <p></p>. A tag Table e suas filhas são utilizados para exibir dados tabulados, por exemplo, uma listagem de produtos, onde são mostrados algumas informações sobre o produto como tamanho, preço, cor, material, disponibilidade, etc…

Tênis Cor Tamanho Preço Disponibilidade
Nike Preto 38-39 R$ 100,00 Em Estoque
Adidas Branco 40-41 R$ 120,00 Esgotado

Formatar informações dos sites não é algo novo. Por volta de 1970, no começo da tragetória do SGML, vários browsers já personalizavam as aparências dos documentos, cada um com seu estilo próprio.

Håkon Wium Lie, estudava e percebia as dificuldades que se tinham ao desenvolver um site, e resolveu criar uma maneira fácil para formatar a informação do HTML. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets. Esse era o ano de 1994.

Em 1995 eles apresentaram sua proposta e finalmente, o W3C – World Wide Web Consortium – que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por HÃ¥kon e Bert Bos. O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1).

Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para web.

Hoje em dia, o nível de compatibilidade entre os browsers é muito parecido, de forma que se você implementar algo específico em um browser, é muito provável que em outro browser esteja igual.

Portanto, o desenvolvedor pode ficar tranqüilo quanto a maioria dos problemas causados por diferenças entre browsers.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Alexandre Gomes Gaigalas

    Só uma coisinha besta. Mosaic é com s. Erro de digitação imagino.

    Um link interessante, e simples pra explicar por que "tabelas são estúpidas":

    http://www.plasmadesign.com.br/stupidtables/

  • Francisco dos Santos

    Como tudo está em constante evolução. No início, usar tabelas foi uma solução encontrada para contornar as limitações de layout no HMTL.

    Mas o tempo passou e surgiram novas idéias (web standards) para facilitar o trabalho do web designer.

    Usar tabelas não é ruim, apenas está fora do contexto atual.

    Sendo assim… Tableless neles…

  • http://www.hsbc.com.br Bruno Mikoski

    o Diego, o que tu ta esperando do novo dreamweaver? e o "editor visual de css"? Tem como esperar algo realmente bom? Ou sera que a macromidia vai trancar ele no ie =[
    Apesar que sempre teve suporte "multibrowser"
    Seria legal se vc fize-se uma analize ai, sobre o novo Dreamweaver em cima de Tableless

  • http://tableless.com.br/eyesmiles/ Diego Eis

    Vou ver o que posso fazer Bruno!
    Mas até agora estou ouvindo só bem dele.
    Tem que esperar para ver.

  • Márcia O. Carmo

    Muito bom o texto!
    Quanto mais textos "estimulantes" desse tipo, melhor.

    Ah, adorei o link do "por que tabelas são estúpidas"! Muito bem ilustrado. É o tipo de coisa que o chefe lê, pelo menos um pouco mais que os outros textos. Eles "nunca têm tempo pra isso."

    =)

    Poiseh Diego, novidades sobre o Studio 8!!! Só sei o que li no site da Macromedia :(

  • http://www.webroom.com.br Henrique Costa Pereira

    Ahhhhhh… Editor visual de CSS é brabo! Na minha opinião tudo que é customizado em termos de XHTML e CSS possa ser perfeito. Isso nem faz sentido pra mim….

  • RONI

    Existe algum editor WYSIWYG

  • Guigo

    Realmente as tabelas ajudaram muito no seu tempo , após ter feito um curso de desenvolvimento de sistemas web , eu conheci o método tableless junto ao web standards e farei novos cursos relacionados inclusive na vision , é muito bom e vejo poucos profissionais utilizando tais termos de criação web , gostei Diego Eis ..

    abraço

  • Pingback: O que é Tableless ? em r3, Padrões Web para Todos!

  • Pingback: [Duvida|Site] Como fazer em tabela? - eXperience Zone - A XP que faltava pra subir de level!

  • Pingback: O que é Tableless? | Christiano Erick

  • http://www.rstri.com Zandormaz

    Muito bom artigo. Estou começando a usar CSS e ávido por informações…

  • Pingback: FUÇANDO NA INTERFACE DO BLOG « HELIOPAZ

  • Pingback: O que é Tableless? « BlogalizeJá Online: Um blog criativo e atual.

  • Pingback: Casa branca tem novo site com tableless, web standards e Jquery. | Selva Binária

  • http://www.musicshow.rg3.net Mukah

    Cara, gostei muito mesmo da matéria!
    Muito bem explicada, entendi perfeitamente!
    Muito obrigado pela colaboração, é bom ter sites que informam corretamente o que nos buscamos!
    ___________________________________________________________________________
    Por Favor, apenas releia e conserte alguns erros de português!

  • http://www.comerciando.com.br Marcos

    Cara, valeu pela materia
    estou comecando agora a desenvolver sites e ainda tenho dificuldades.
    irei pesquisar mais sobre o assunto.

  • Pingback: Miss Croft .com

  • http://web.inteccsd.com.br Frank

    Ótimo artigo, posso copiá-lo no meu site? http://www.web.inteccsd.com.br

    Claro com os devidos créditos e link para cá?

    Abração

  • http://www.mendesites.com Thiago Mendes

    Realmente muito bom esse post…
    caramba valeu mais apena do que varios livros que li sobre o assunto…

    é isso ai !!!

    CSS na veia e HTML no coração!

  • http://www.glaucodanilo.com.br Glauco

    Eu uso um pouco de tabela ainda … mas com o tempo vou me aprimorando no css e paro com tables !!

    abraços

  • Pingback: Intor – Instituto do Tórax » Eté design

  • http://www.robotweb.hd1.com.br Fernando

    gostei das informaçoes !!! to aprendendo ainda…

  • http://www.jeanmichell.webs.com Jean Michell

    Sendo assim, eu faço sites em “Tableless”, rs.
    Mas no início (principalmente para aqueles que aprendem só), as tabelas salvam! Hehe…