Busca

Boas práticas de Desenvolvimento com Padrões Web


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 internacional, onde são desenvolvidas os padrões para a web (Web Standards) tais como: HTML, CSS, [...]

09/08/2005 por Diego Eis
19 Comentários

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.

19 Comentários

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

19 Comentários

Alexandre Gomes Gaigalas 09/08/2005 às 00:00

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 09/08/2005 às 00:00

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…

Bruno Mikoski 09/08/2005 às 00:00

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

Diego Eis 09/08/2005 às 00:00

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

M&#225;rcia O. Carmo 09/08/2005 às 00:00

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 :(

Henrique Costa Pereira 09/08/2005 às 00:00

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 09/08/2005 às 00:00

Existe algum editor WYSIWYG

Guigo 03/01/2008 às 10:40

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

O que é Tableless ? em r3, Padrões Web para Todos! 24/02/2008 às 17:08

[...] O que é Tableless? (www.tableless.com.br) [...]

[Duvida|Site] Como fazer em tabela? - eXperience Zone - A XP que faltava pra subir de level! 23/03/2008 às 03:34

[...] tabelas… Hoje em dia já existe CSS, que tal começar com tableless? Recomendo os seguintes links: Tableless O que é Tableless? Tableless O Caminho Suave para o Tableless []’s __________________ Meus websites: GHSehn, Blog [...]

Zandormaz 12/11/2008 às 08:57

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

FUÇANDO NA INTERFACE DO BLOG « HELIOPAZ 19/11/2008 às 17:34

[...] copiar e editar o código em CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata – v. DICAS AVANÇADAS), a versão gratuita do WORDPRESS (.COM) não o permite. Isso significa que o usuário do BLOGGER [...]

Casa branca tem novo site com tableless, web standards e Jquery. | Selva Binária 21/01/2009 às 12:19

[...] Se você pensou que apenas o visual iria mudar se enganou, o novo site foi desenvolvido utilizando tableless em sua página principal, segue os padrões da web (web standards) funcionando nos principais [...]

Mukah 21/01/2009 às 23:59

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!

Marcos 02/04/2009 às 12:58

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

Miss Croft .com 30/05/2009 às 17:13

[...] “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 usada pela maior parte dos websites, chamamos de layout com tabelas” (Retirado de Tableless.com.br). [...]

Frank 25/06/2009 às 22:45

Ó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