O seu cliente deve saber que há uma técnica de desenvolvimento de sites ainda relativamente pouco utilizada pelos nossos webdesigners, apesar de contar com alguns esforços significativos para a sua disseminação.
Mas a pergunta dele é se realmente é preciso refazer o site da empresa? Ele também pergunta: “Terei ganhos financeiros com isso? Vai me agregar valor?”.
Se este é o caso e seu cliente tem perguntas como estas, a resposta é um convicto SIM.
Para ajudar, vamos ver uma lista de vantagens e desvantagens que pesam para que o site da empresa de seu cliente esteja “tableless”.
O que ele ganha com o tableless?
- Melhor posicionamento nos sites de busca
- Diminuição do uso de banda entre 50% à 75%
- Site acessível até para cegos e outros deficientes fisicos
- Agilidade e facilidade na mudança do layout do seu site
- Rapidez para o acesso do seu usuário
- Seu site preparado para Web 2.0
O que perde com isto?
Não há desvantagens no uso dos padrões web e dos sites tableless. Temos sim uma carência de bons profissionais que dominem esta técnica. Mas por pouco tempo, é claro.
Vamos detalhar um pouco cada vantagem:
Melhor posicionamento nos sites de busca. Imagine que sua empresa fabrique equipamentos de proteção individual e tem um site que expõe seus produtos e eu sou um comprador que constantemente busca novos fornecedores. Vou até um site de busca digito “Equipamentos de Proteção Individual (EPI)” e vejo a lista dos 10 primeiros e pronto, mando meu pedido de orçamento. Esta é a vantagem dos buscadores, trazerem o que é pedido. Sites tableless são melhor estruturados e facilmente indexados pelos buscadores.
Diminuição do uso de banda entre 50% à 75%. O tableless diminui o tamanho dos htmls e com isso ajuda na transferência de banda. Você poderá gastar menos com hospedagem.
Site acessível. O site acessível pode atender a um número maior de pessoas. Além dos deficientes físicos, os portadores de deficiências leves (vista cansada, dislexia, daltonismo) ou mesmo pessoas com algum problema temporário de equipamento (mouse ou monitor defeituoso). O tableless tem uma estrutura de programação muito clara para leitores de tela usado por deficientes visuais para acessar a web.
Agilidade e facilidade na mudança do layout do seu site. Este é um ponto que traz um ganho substancial. Imagine que sua empresa resolva mudar a cara do site em função de uma data comemorativa ou mudança interna – não seria preciso desenvolver tudo de novo e a mudança pode ser feita rapidamente pois um site tableless utiliza um arquivo de layout e outro de conteúdo. Para mudar basta alterar um único arquivo e seu site já está de cara nova.
Rapidez para o acesso do seu usuário. Lembre-se que muitos de seus clientes podem usar linha discada para acessar o seu site. Se ele for pesado, pode não carregar. Se estiver bem montado, carregará com boa velocidade. Faça um teste – use a linha discada e acesse o seu site. Compare a velocidade com a de outros sites. Veja como a home do UOL, por exemplo, abre rápido, pois é tableless, com são os grandes portais.
Preparado para Web 2.0. Se fizer sentido, você pode convidar usuários a editar conteúdo, criar uma comunidade, definir o que quer ver. Ter seu público ligado ao seu site pode gerar mais resultados e o seu site está pronto para incorporar essas características.
A mudança de table para notable não é um aspecto isolado e faz parte de uma estratégia onde a empresa de seu cliente passa a investir e a trabalhar melhor com os recursos da internet. E que os profissionais de web não fiquem parados, pois há um grande trabalho a fazer, pois nosso mundo vive em constante evolução. [Webinsider]
.
Armando Ferraz Santos
Armando Ferraz Santos (armando@targetdigital.com.br) é especialista em vendas online e soluções para mobile marketing e desenvolve projetos para a Target Digital. No Twitter é @Armanrulla.
64 respostas
Corrigindo o comentário acima, muitas empresas mantêm seus sites no ar, “não” feitos em tableless.
Desenvolver sites em Tableless não é complicado, é questão de costume. Muitas empresas ainda mantêm seus sites no ar feitos em Tableless, devido possivelmente a falta de conhecimento ou até de vontade em modificá-los.
Olá pessoal, tudo bem?
Gostaria de expressar minha opinião sobre o assunto. Acho que o que está acontecendo na web é que muitos sites estão tentando mostrar para os desenvolvedores é que o desenvolvimento com tabless é melhor que desenvolvimento com tabelas, o que não está errado. Só que estão fazendo isso da maneira errada, criando artigos inúteis e de forma completamente errônea.
O que o Armando escreveu pra mim foi uma completa bobagem, pois a maioria doque ele informa está errado.
Eu tenho um site todo feito em Tabless e posso dizer que é muito complicado. Tem suas vantagens e também suas desvantagens.
Só o que acontece é que desenvolvemos por muitos e muitos anos utilizando tabelas, e isso criou um vício entre os desenvolvedores, talvez até um vínculo pessoal com desenvolvimento em tabelas.
Só que o tabless na minha opinião é mais uma nova metodologia de desenvolvimento de sites doque um padrão. Ele traz vantagens incorporadas em seus códigos fora a facilidade em criar efeitos visuais.
Só que tabless NÃO É NADA SEM SEMÂNTICA. Acho que toda esta conversa deveria ser baseada na semântica das páginas doque própriamente no tabless. Ouso dizer ainda que se apenas alterasse o título deste artigo para “O site do meu cliente não tem semântica” talvez muito mais doque tivesse sido escrito estaria errado, porque é a semântica que ajudar também na indexação. Ela que deixa o código muito mais leve e inteligente.
Então acho que antes de se aventurar em escrever e glorificar o tabless, acho que deveriam dar muito mais importância a semântica das páginas web e boas práticas de desenvolvimento.
Abraços a todos!
Estou mudando o meu site agora para estes padrões… estou tendo um trabalho bem grande pra migrar (entenda-se por fazer tudo novamente) um site de 4 anos de vida para um novo projeto…
tenho muito conteúdo em dois idiomas…
mas por tudo que ando lendo, vai valer a pena…
é oq eu espero.
abraços,
Reinaldo Lopes
– Muito mais trabalhoso, maior tempo de produção.
Só pra quem não tem prática mesmo.
– Poucos profissionais conseguem dar manutenção.
Infelizmente…
– Grande luta para deixar o site compatível com todos os navegadores, mas grande mesmo!
Só pra quem ainda não fez isso antes.
– Limitação para layouts arrojados, que utilizam muitas imagens e curvas. Fica impossível montar o site sem tabelas.
Na verdade, não. Isso depende de quão experiente é o designer em CSS.
Realmente o autor poderia ter caprichado mais neste artigo. Poderia conter mais esplicações, abordar mais temas relacionados ao assunto. E essa de sites para cegos foi fodah!
Existem muitas vantagens sim em desenvolver um site em tableless, mas deve ser realizado de acordo com a demanda do projeto. Essa é a primeira de todas as preocupações.
Acredito que mais importante do que montar um site sem tabelas, é seguir as normas e padrões w3c que resultaram em um site desenvolvido de forma mais profissional. Sem contar que o objetivo de um site é trazer RETORNO! Então se não foi bem planejado, não possui estratégia e conteúdo relevante de nada adiantará usar uma tecnologia ou outra.
Pra mim as grandes vantagens de utilizar tableless:
– Melhora a indexação nos mecanismos de busca SIM!
– Site mais leve.
– E o principal, site acessível para dispositivos movéis. Ninguém comentou sobre isso, mas quando você precisa acessar um site por um Palm, ai sim você nota o quanto é útil e necessário usar tableless. Porém mesmo assim depende do projeto.
As desvantagens:
– Muito mais trabalhoso, maior tempo de produção.
– Poucos profissionais conseguem dar manutenção.
– Grande luta para deixar o site compatível com todos os navegadores, mas grande mesmo!
– Limitação para layouts arrojados, que utilizam muitas imagens e curvas. Fica impossível montar o site sem tabelas.
cara concordo com vc!!
mas o que acontece é os seguinte, sempre ficam discutindo o todos já sabem (eu acredito)…
Tableless já uma regra na europa e américa do norte, e somente aqui no Brasil que há essas discussões sempre com os mesmo argumentos e assuntos.
Somente aqui no Brasil isso e novidade, la fora já nem se discutem mais o que é, e o que não é…
Mas sei lá, não quero botar mais lenha na foguera, nesse assunto onde todos falam a mesma coisa sempre mas somente com palavras diferentes!
O artigo é interessante e os comentários anteriores muito mais [risos]…
Pelo que dá para perceber neste artigo e em muitos comentários:
Usar tableless ou não está parecendo uma paranóia, um dogma de uma seita que deve ser seguida a qualquer custo que prega a elevação do ego a níveis estratosféricos por dominar tal metodologias [risos]…
Caríssimos…
Cada caso tem uma aplicação específica…
Um exemplo, concordo com o Manuel Lemos, no que diz respeito a Readptar o layout para tableless seria como trocar 6 por meia dúzia….
Se o layout for simples e ser usado em um projeto para uma intranet, os recursos disponíveis para o projeto [$$$] são limitados e a prioridade é disponibilizar o sistema o mais rápido possível, vocês perderiam tempo com tableless só para inflar o ego [em comentários de artigos como neste site por exemplo..risos] dizendo que estruturaram o layout sem usar tabelas ? [risos].
A manutenção do layout daria na mesma pois o tráfico gerado na rede seria o mesmo [afinal existe a compressão gzip ;)], a manutenção daria na mesma [pois a organização dos dados e partes layout é feita pelo próprio CMS] e não seria necessário otimizar para buscadores [o google invade intranets fechadas para disponibilizar o conteúdo com as buscas ???..risos]
Tudo bem que o artigo não foca desenvolvimento para a intranets, mas o que teria em comum com o desenvolvimento de um site a ser disponibilizado na grande rede?
Análise de desenvolvimento/implantação/uso de metodologias e recursos em projetos para web meus caríssimos colegas !
Independente de você ficar se gabando que sabe metodologia X ou metodologia Y, a sua ilustre sapiência [eu diria ignorância…risos] terá que ser usada para pensar em resolver um problema e não somente para saciar o seu ego [risos]
Realmente tableless dá um puta trabalho, mas com tabelas também pode se usar CSS, e separar conteúdo da apresentação, certo?
Não defendo nenhuma das duas metodologias e nenhum comentário… estou apenas questionando a aplicação em projetos.
Não sou contra aos padrões do W3C, e muito menos contra tableless ou semântica…risos
Antes que postem flames ao meu comentário… Utilizo tableless e procuro estruturar layouts para terem o (x)html válidos e com uma semântica limpa e de fácil manutenção 😉
Afinal de contas: O que deve ser feito para atender qual objetivo ? Quais são as principais prioridades ? A que custo ? E quais serão os benefícios ? Como medir os resultados ?
Meus caríssimos, os seus clientes estão preocupados é com o isso oh: Prioridade, Custo, Benefícios e Resultados…
E não em saber se vocês sabem a metodologia X, Y ou Z. [risos]
Independente da metodologia que usar, vocês terão que atender ao projeto do seu cliente e não ao seu ego …
Ah… se o nosso ego pagasse as nossas contas e as contas das nossas agências/empresas no final do mês… [risos]
Realmente importa se é modismo ou não?
Tableless é a pior palavra pra usar quando falamos de web standards, porque ela gera mal entendidos demais.
O CSS, em se tratando de design, é a melhor ferramenta pra criação de layouts. Exceto pelo pequeno problema citado pelo Manuel com centralização vertical, tudo que pode ser feito com tabelas pode ser feito com CSS.
A diferença é que o CSS foi CRIADO para isso, é o objetivo dele. Tabelas são um workaround, uma gambiarra.
Não adianta comparar um site com outro, sites diferentes tem diferentes quantidades de conteúdo. A maioria dos sites da internet não são portais, não adianta dizer que um portal tableless é mais lento que 50% da internet porque o que pesa nesse caso é a quantidade de conteúdo.
Comparando somente alterações no design, como podemos ver na seção de convertidos do Tableless.com.br, podemos ver que realmente faz diferença o uso de CSS.
A parte dos sistemas de busca não tem a ver necessariamente com o CSS, mas sim com o XHTML. Um layout tableless nem sempre vem com um XHTML bem estruturado, quando vem apresenta excelentes resultados no Google, porque XHTML é uma ferramenta semântica de marcação de dados e dados bem estruturados tem melhor familiaridade com sistemas de busca. Tabelas não conseguem o mesmo desempenho por obviamente apresentarem uma estrutura tabulada para dados que não são originalmente tabulados.
Finalmente, as melhorias para cegos e deficientes visuais podem ser obtidas sem uma folha de estilos especial, ao contrário do que diz o Manuel Lemos. Essas melhorias são conseguidas com boa estruturação do HTML/XHTML e não nas folhas de estilo. Ao ler uma tabela um leitor de telas para cegos lê linha por linha, nomeando as colunas.. o que obviamente nem sempre é a intenção do programador ao estruturar o conteúdo. Em um site com html e css empregados corretamente, o html fica livre de marcação inútil e puro de conteúdo, fácil de ser lido. Folhas de estilo especiais aurais NADA tem a ver com a facilidade para reconhecimento por leitores de tela, elas apenas controlam velocidade, tonalidade e voz. São como o CSS normal, oras! Apenas controlam a aparência e não o conteúdo.
E por fim, essa é a grande vantagem de criar um site dentro dos padrões html e css. Separação de conteúdo e design otimiza muito o desenvolvimento.
Bom, sobre o AJAX, o XmlHttpRequest faz sim parte do padrão ECMAScript. O que o IE5.5 fez é usar esse controle através de um ActiveX e não diretamente pelo JavaScript, é esse o problema de implementação deles. No Firefox, Opera, Safari e demais navegadores modernos encontramos a implementação padrão do AJAX com o objeto XmlHttpRequest de acordo com as especificações ECMA.
Todo bom programador em AJAX sabe que tudo não passa de Javascript, e todo programador Javascript deve saber que seu código não deve ser obstrusivo, ou seja: O site tem que funcionar mesmo quando o Javascript (e o AJAX consequentemente) estiver desligado. Um bom exemplo é o Gmail, que tem versão em HTML Pura.
Portanto, AJAX não é e nunca será argumento contra os padrões web.
Bom, apesar de todas as vantagens do CSS e HTML segundo os padrões web estarem nítidas, alguns pontos tratados no post são meio ludibriosos mesmo. Economia de banda é insignificante a menos que seja um portal gigante. Para um site com poucos acessos, raramente será uma economia que a faça pegar um plano de hospedagem mais barato (geralmente a pessoa já possui o plano mais barato).
Finalmente, o que não se deve é cobrar a mais por um site dentro dos padrões. VOCÊ NÂO FAZ MAIS DO QUE A OBRIGAÇÃO em usar padrões web, eles não são um diferencial..
Programra em Tableless foi nova pra mim. Nâo sabia que tinha virado linguagem de programação. :-0.
Aos comentários anteriores, seria desnessário falar mais alguma coisa, pois todos se colocaram muito bem, mas duas coisas que o pessoal tem mania até hoje:
1) Se prender ao fato de que o Dreamweaver não é produtivo. Mais uma vez, a velha estória da ferramenta. Não se prenda a ferramenta, se prenda a produtividade. Se você sabe explorar o potencial da ferramenta e produzir um trabalho eficiente, melhor ainda. Eu consigo produzir padronizadament com ele, alguém mais consegue.
2) Dizer que quem é a favor do Tableless é contra o Flash? Calma lá cara pálida. Basicamente, eu era um Macromedia man, até hoje sou, só acho que cada coisa no seu lugar, no seu devido tempo, no seu devido esforço. A diferença é custo, tempo de produção e linha de aprendizado, que isso ninguém até hoje apresentou comparativos, mas que fica praticamente explícito que em HTML é mais rápido. Não estou sendo contra o FLASH, apenas estou dispondo um fato, que ninguém pondera antes de comentar quem é ou não é melhor. As duas tecnologias estão aí anos, a pleno funcionamento, e o com o sucesso estabelecido. Não há mais o que provar.
Quanto ao artigo, existem alguns pontos que sou obrigado a concordar com alguns colegas. Por exemplo, o fato do site carregar mais rapidamente. Lêdo engano. De nada adianta ter um site em html e css, se as imagens são pesadas, as regras do css são mal estruturas. É incrível, mas tem gente que parece que esquece que o CSS também é caracter a ser interpretado pelo browser, e quanto mais caracteres de regras, mais bytes a serem carregados e a serem interpretados pelo browser. Nâo estou defendendo tabelas, pelo contrário, acho que o uso para o qual ela não foi concebida, ou seja, layout, não é a forma correta de manter uma lógica semântica, mas respeito que a usa, cada um com seus problemas. Só acho que a comparação de peso de carregamento, só é válida em pé de igualdade, ou seja. Ou seja, estruturar as mesmas informações, imagens em um html e css que usa tableless e outro em tabela. Nesse sentido sim é que eu acredito que pode haver diferenças.
É isso.
Abraços a todos
Armando programo em tableless a mais de um ano, e concordo com algumas coisas que você escreveu, mas voce englobou mta coisa… vc deveria explicar melhor pois tudo varia, até mesmo o consumo de banda, não é em 100% dos casos que tem um consumo diminuido em mais de 50%…
E outra coisa que vc falou um site tableless utiliza um arquivo de layout e outro de conteúdo. Para mudar basta alterar um único arquivo e seu site já está de cara nova.
Vc está falando de tableless, ou seja, html sem tabela, e todos nos sabemos que html é estático, que tem esse poder de alterar somente um arquivo e alterar todos e somente php, asp, entre outras linguagens de programações… Acredito que você esteje falando do css, mas você deveria ser mais especifico no seu artigo!! blz?
abraços ai!!
Faltou o principal argumento: é mtttt mais fácil e rápido desenvolver em tableless.
(claro q ñ estou falando de fatiar layouts no Fireworks)
Se estiverem interessados em uma comparação acadêmica da conversão de 2 sites (um cheio de gifs espaçadoras e um SEM gifs espaçadoras e bem estruturado), vejam meu trabalho de conclusão.
Já informo que, seja em um site cheio de gifs espaçadoras e um site COM tabelas BEM feito, a conversão pra um design CSS trouxe inúmeros benefícios.
Lucas, perfeito…muito bem elaborados, gostei muito dos trabalhos. Confesso, que achei um pouco lento, o carregamento, mas a qualidade final achei que compensou… No google porem (não sei quando foram feitos), eu notei que por exemplo pagerank nos sites são quase todos 0. Mas ai já talvez seja um outro assunto. Mas acredito que desenvolver sites em tabless ajuda muito no posicionamento do google, não totalmente em flash. Depende também do cliente, se ele já não precisa de aparecer tanto na web, então nem interessa isso. Os meus estão aqui http://www.pype.com.br
Diogo, não estamos tratando no momento de design e sim de padronização web. Mas imagina, como a Simone comentou um cliente da padaria, que não sabe o que é design, só quer um site bem feito.
Para nós Templates são excelentes para isso…são mais de 8.000 opções que nós personalizamos, não temos preguiça de desmontar e montar novamente. Aproveitamos a idéia. Não importa o tamanho do cliente, o negócio é conseguir dar uma solução excelente para qualquer tipo de projeto.
Agora os modelos não vem em tabless, com o logo do cliente, com as cores, com a organização do conteúdo. Esse tempo de criação que acabamos ganhando, nós aproveitamos e caprichaamos na customização e programação do site no formato web standard.
Pode notar que a grande maioria de nossos sites são bem posicionados no google e também com um page rank interessante. Veja esse site que fizemos e mantemos como trabalho voluntário para ABAS (associação banespiana) http://www.abasnet.org.br, lançado em 12/2006. Hoje já esta com pagerank 5.
Porque ? bem elaborado e dentro dos padrões web standard só isso.
Acredito que discussões acaloradas trazem muitos benefícios a todos, pois toca diretamente em uma parte muito importante para qualquer profissional, o estudo.
Aprendi muita coisa com esse post, e acredito também que eu tenha elucidado muitas pessoas com minhas exposições sobre a Flash Platform.
agradeço a todos.
Lucas Marçal
Caro Armando,
discordo de várias abordagens do seu texto. Gostaria de ter lido mais ênfase nos padrões de desenvolvimento Web (W3C, ECMA etc) do que na metodologia. Mas tenho que dizer que discordo muito mais desta avalanche de comentários destrutivos. Fico chocada ao ver que há pessoas que ainda pensam como em 1998.
Desenvolvimento de acordo com os padrões Web hoje é essencial para a diversidade e complexidade dos aplicativos e sites existentes hoje e será muito maior nos próximos anos. O Webinsider que você lê hoje no seu desktop com Windows XP está pronto para ser lido no seu subnotebook com Ubuntu e Firefox, no seu smartphone rodando SimbianOS, no seu celular rodando OperaMobile… e a lista não acaba. Algum dia a portabilidade e a acessibilidade vão ser requerimentos dos seus clientes. O que você irá dizer? Um site para cada tipo de dispositivo ou sistema operacional ou navegador?
Para os sites da padaria do Seu Joaquim, faz pouca diferença a metodologia de desenvolvimento, confesso. Mas se um dia você for chamado para uma multinacional destas você terá algum portfolio para apresentar e alguma experiência para comprovar?
Peço que reconsiderem novamente e estudem alguns cases de desenvolvimento com webstandards. Ainda estamos numa fase de early adopters entre desenvolvedores e designers, mas acredito piamente no amadurecimento dos profissionais da Web neste sentido.
[]s
Só um comentário Sandro: Você vem falar de postar trabalhos com propriedade sendo que sua empresa desenvolve sites usando templates do Template Monster, que já vem tudo prontinho?!
Cá pra nós hein…
Tranquilo Armando, acima de tudo o assunto é muito interessante.
oloko.. copiando até meu desafio ?
Sandro, infelizmente falar é fácil, desafio você a postar seu portifólio em Css e me mostrar seus resultados, quanto aos meu resultados podem ser vistos em http://www.zetai.com.br .
A grande diferênça é o conhecimento, se você tem vc faz, se não tem, fala fala e nada.
Críticas, críticas, críticas….
Quando eu leio os posts das pessoas que criticam esse artigo com tanta propriedade, penso… no mínimo devem ter trabalhos interessantes.
Outro que defende flash como sendo tudo nessa vida… Porque então a própria adobe ou na época a macromedia não fez um site totalmente RIA ?
Tem que ver a aplicação para escolher a tecnologia, vemos tantos sites…com o carregando para apresentar um logo girando..e depois levar para uma tela html.. ou então fazer um tumbnails de fotos em flash e ao clicar no zoom abrir uma janela html… Saber usar a tecnologia é questão de bom senso, não é nem uma virtude…
Minha sugestão seria então que quem critica tanto poste seus belos trabalhos, já que possuem tanto fundamento, até para aprendermos mais e voltar a velha programação via tabelas.
Mas minha experiência diz que ninguem vai postar nada porque quem critica não tem nada para apresentar, só criticas… É assim, todo mundo diz muito e não faz nada.
Pode até acontecer de alguem postar o seu próprio site, talvez bonito… mas dos clientes tenho certeza absoluta..que são todos ruins.
A grande verdade é que, quem não tem padronização de programação não vai entrar nessa de tableless, porque dá trabalho.
Quem se habilita a postar seus trabalhos ?
Infelizmente existem sites onde a ocorrência de profissionais fazem de tudo, ou Especialistas é maior, desafio alguém aqui me mostrar um site, bonito e de conteúdo dinâmico e interativo em css, respostas podem ser enviadas para http://www.lucasmarcalferreira.com.br
Abraços.
é…. realmente cada um tem sua opinião… se esse assunto fosse abordado em sites voltados realmente a desenvolvedores web, ele seria melhor discutido.
Abraço a todos.
Olá Fábio,
Realmente, muito pertinente seu comentário: concordo que os padrões do W3C devem ser respeitados.
No entanto, como respeitar os padrões do W3C e considerar a semântica das tags utilizando tabelas para organizar o layout?
Como comentei anteriormente, o tableless não é a solução prefeita, mas uma transição no modelo de desenvolvimento (de com tabelas para sem tabelas). Afinal, a transição de tableless para web standards é muito mais fácil do que a transição de tablemore para web standards.
Abraços
Caio Cesar boa tarde
Na verdade o que disse foi que Tableless é uma ferramenta que ajuda no desenvolvimento com vantagens significativas, além de preparar seu site para web 2.0, logico que cada caso é um caso, como desenvolvedores, analistas e designers temos que estudar um a um e dar a melhor solução.
Um abraço;
Este artigo está equivocado, vamos defender o que é mais correto.
Ser tableless ou não, não importa, vai depender do projeto. O importante é respeitar os padrões W3C, ai sim o site de seu cliente vai ter a melhor opção.
Veja:
http://www.tableless.com.br/web-standards-vs-tableless
http://www.revolucao.etc.br/archives/tableless-vs-web-standards/
…depois visitem o site da W3C e bebam na fonte!
Abraços
Artigo infame, visto que esta sem sentido.
1. Tableless não implica na inutilização das tabelas, e sim o USO CORRETO das tags HTML, implica na semântica para utilização das tags DIV e SPAN.
2. O tableless diminui o tamanho dos html, depende do caso, as vezes você diminui o HTML porém aumenta a folha de estilo (CSS), e também pode aumentar sua dor de cabeça, as vezes.
Bom, outras coisas nem irei comentar, pois nem se tratam propriamente do assunto tableless. Talvez você tenha confundido tableless com WEB 2.0.
adicionando um pequeno comentário:
Não estou aqui para defender este artigo ou o seu autor, longe disto. Trabalho em uma agência onde há a mesma batalha. Tableless ou continuamos 100% tabelas?
Talvez a divergência das idéias aqui dispostas tenham a ver com a dimensão da clientela ou dos projetos.
Minha experiência nos vários redesenhos de layout de sites dizem que tableless é muito mais ágil e limpo, além de possibilitar algumas jogadas interessantes como layouts dinâmicos entre outros fazeres que podem mudar asua vida e a vida do cliente.
No que diz respeito a vender o serviço, precisamos ganhar o pão de cada dia, acredito que o cliente deva sim pagar por um novo site em tableless, quando chegar o momento de produzir a nova versão do site e, não pelo motivo exclusivo do tableless.
Se o novo site for bem projetado e documentado, talvez a próxima versão leve bem menos tempo e recursos pra ser implementado, concorda?
Abraços e boa sorte na discussão.
Ao colega Manuel Lemos.
Cara.. concordo com quase tudo que disse acima com exceção do Aliás achei este outro artigo muito engraçado, tirando o sarro sobre as coisas em que os designers Web ficam perdendo tempo, incluindo martelando no CSS para tentar usar emular layouts que apenas podem ser conseguidos usando tabelas.
Meu deus! Aqui na agência onde trabalho tem gente que faz todo o trabalho na interface wysiwyg do dreamweaver, enfim, isto é produtividade?
Produtividade pra mim é poder alterar todo o visual da minha homepage dinamicamente ou alterar um classe no css para efetuar uma mudança global em todo o projeto.
Tabelas para conteúdo que exige tabelas, layout é tableless.. se você não trabalha com tableless, ao seu cliente, meus pêsames.
Manuel
Acredito que esta é a sua opnião, da qual respeito, porem o objetivo do meu artigo não é enganar o cliente e sim alertar que existem formas melhores de desenvolvimento web.
Quanto a velocidade com que abre uma página web é relativo a n fatores como trafego, servidores, quantidade de usuários, link do servidor, etc.
Como já lhe disse tableless é uma ferramenta como inumeras que tem por ai, use a que você se sentir mais confortável.
Segue abaixo alguns artigos sobre tableless que pode lhe ajudar a enxergar melhor o que lhe digo, e dizer que não há nenhuma enganação para o cliente.
Esta mostra um case da ESPN que economizou cerca de 2 terabytes em banda POR DIA
http://www.mikeindustries.com/blog/archive/2003/06/espn-interview
Este é um resumo do case em português
http://www.tableless.com.br/uma-das-vantagens-dos-padroes
Este é um Trabalho de conclusão de curso que fala sobre o assunto dando exemplos de tudo que eu falei aqui.
http://www.redes.cefetgo.br/gl_downloads/tcc/pdf/tcc_11667074300.pdf
Esta é interessante pois mostra o peso das páginas e a velocidade com que são abertas as páginas.
http://www.tableless.com.br/convertidos/
Abraços
Armando, parece que você está desviando a atenção do verdadeiro problema.
Os exemplos do site tableless.com.br são ótimos para reforçar o que eu já disse.
Se você reparar nos exemplos de versões ditas não tableless, você pode constatar que são usadas imagens para dar o espaçamento entre elementos que os designers entenderam ser necessário.
Se você substituir essas imagens de espaçamento por atributos no HTML especificos de espaçamento, verá que a raiz do problema de lentidão na carga das página é eliminada, sem precisar mudar as tabelas para DIV com CSS.
Agora ironicamente, o site tableless.com.br em si não é um bom exemplo de rapidez de carga. De acordo com o Alexa 79% dos sites de toda Internet são mais rápidos a carregar que o tableless.com.br (4.2 segundos para carregar a home page).
http://www.alexa.com/data/details/main?q=&url=http://www.tableless.com.br/
Enfim, nem o fato de usar tableless e até mesmo compressão HTTP que conseguiu ajudar o tableless.com.br, comprovando assim que o que mais pesa no cerregamento de páginas nada tem a ver com tableless.
Seja como for, o problema do seu artigo não é recomendar o uso do tableless, mas sim culpar os donos de sites que usam tabelas como se isso fosse a raiz dos problemas de lentidão.
Agora o que me parece anti-ético é ficar iludindo clientes falando que vão ter de gastar uma nota preta a designers para refazer o design em tableless, mesmo quando essa mudança nada vai mudar na rapidez de carga das suas páginas.
Eu sei que os designers têem de ganhar a vida, e o que não falta neste país é gente iludindo clientes a pagar por problemas na repimboca da parafuseta, ou seja, coisas que os clientes não sabem e por isso não podem argumentar sobre a real necessidade.
Por isso acho péssimo que se escrevam artigos recomendando coisas que os clientes não precisam. Não dá para enganar os clientes a tempo inteiro. Um dia eles descobrem que foram enganados, e toda a classe dos designers e desenvolvedores de sites vai ser taxada de desonesta e abusadora da ignorancia dos menos esclarecidos.
CAda comentário que agente vê.
Pessoal que está criticando: desafio vocês a fazerem um site respeitando os padrões Web e se surpeenderem com o resultado.
Tudo que o Armando diz é verdade e pode ser comprovado na prática. É só largar de preguiça e fazer um teste aprendendo o CSS.
Se preferem continuar desenvolvendo em metodologias antigas, não critiquem quem tem coragem pra fazer o melhor. CSS layouts e webstandards não são só moda.
Eles trazem todas estas vantagens citadas EFETIVAMENTE. Eu fiz e comprovei.
É isso mesmo Lucas, o flash está muito a frente de todos esses assuntos e todas as inovações que ainda nem chegaram, porém, como disse antes, esse pessoal é contra a microsoft, adobe/macromedia etc.
Com relação ao comentarista que falou sobre normas e padrões de certificação industrial (ISO), para conquistar essas certificações há critérios bem definidos, agora querer estabelecer um critério rígido e seguir isso a risca religiosamente sob pretexto de garantir qualidade é um tanto quanto questionável.
A qualidade de um projeto é avaliada pelo público, se o site é pesado ninguém acessa e pronto, não adianta pensar em código sendo que o objetivo de qualquer site, ou pelo menos da maioria, é encantar e conquistar a preferência do cliente. Por que eu quero um site que apareça do google na primeira página em qualquer lugar do mundo se o meu produto é feito somente para o Brasil, ou pior ainda, São Paulo e Rio?
Lembrem-se, a visão tem de ser macro, mas a ação por vezes é local. Eu me preocupo com o negócio em si, o business o retorno do investimento, o resto é lenga-lenga. Hoje é ajax, amanhã é dínamo, web 2.0,3.0 etc.
O importante é saber filtrar. O que é bom fica e o que é ruim sai fora, essa é a única regra que vale pra tudo, o resto é conversa fiada.
A muito tempo não critíco artigos voltados a esse assunto, mas esse me chamou a atenção, será que com a grande evolução da Flash Platform, vale a pena perder tempo com tableless ?
Humildemente falando eu conheço o suficiente sobre Flash Platfom para responder essa pergunta, e a resposta é um sonoro e gigantesco Não.
Quais são as vantagens de se desenvolver RIA
Essa é fácil, com os novos modelos de negócios que estão surgindo, dito, Móbile, Tv digital, e a recém criada Web 2.0, as formas antigas de se criar conteúdo se tornaram obsoletas, forçando a desenvolvedores se atualizarem com novas tecnologias e conceitos, se focarmos apenas na web, o processo de Rich Internet Application resolve problemas antigos de aplicações baseadas no conceito de Web 1.0 que são eles:
1. Arquivos mais compactos e menores em interfases mais compactas e leves.
2. Declara fim a processos de Refresh de paginas, onde o usuário tem que, a cada clique do mouse esperar o conteúdo do site ser recarregado para visualizar as informações.
3. Suporte a Multimídia como Vídeos e áudio Streaming.
4. Diminuição do processo de navegação, onde o projeto deixa de ter várias paginas e passa a ter varias telas.
Porque o Flash para desenvolvimento de projetos Ria ?
Esse é um assunto que causa polêmica em torno do processo de RIA, alguns preferem outras ferramentas e tem seu argumentos eu porém vou defender aqui algumas vantagens do flash que fizeram com que eu adota-se o processo de RIA pelo flash.
1.Interface de WebSites.
2. Conteúdo dinâmico.
3. Animações.
4. Vídeo e Áudio com streaming.
5. Conteúdo para celular.
6 .utilização de XML.
7. Componentização com componentes nativos do flash, classes no conceito de programação orientado a objeto.
Eu acredito que o flash é o software mais completo para desenvolvimento web na internet, mas, essa é uma opinião pessoal, abaixo eu vou listar algumas coisas que o flash faz que talvez você não soubesse:
O player do flash esta presente em 98,3% dos computadores conectados a internet
O flash tem uma paleta chamada Accessibility que possibilita ao desenvolvedor criar Índices para cada MovieClip, tornando assim a navegação de TabIndex completamente possível.
O flash é o software que une em um só programa, plataforma para desenho e programação, sendo possível integrar Áudio, vídeo, vetor e Bitmap.
Com a evolução gráfica do Flash 8, que adicionou novas paletas de efeitos visuais, hoje já é possível fazer um site inteiramente desenvolvido dentro do próprio flash.
Com o auxilio do Flash Remoting, é infinitamente mais fácil ligar o flash a um banco de dados, isso desde a versão MX, hoje, existem ainda paletas para supervisionar as respostas obtidas pelo flash o que facilita muito o desenvolvimento.
O flash pode acessar WebServices.
O flash tem completo suporte a conteúdo XML
Já é possível criar salas de reunião com vídeo e áudio usando somente o Flash Media Server
O flash tem suporte de streaming de vídeo e áudio
Atravéz da classe MovieClipLoader, é possível verificar a porcentagem de Bytes carregados de imagens e MovieClips, o que possibilita uma maior informação ao usuário do que está acontecendo no sistema.
É possível criar sistemas de e-commerce com o flash, se integrado com outras linguagens como o PHP e o Coldfusion, um bom exemplo disso é o site NikeID
O tempo de resposta de uma aplicação flash é menor que os modelos atuais.
Elementos gráficos mais leves, quando se utiliza vetor no lugar de Bitmaps.
Interface animada, afinal quem não gosta de um movimento ?
Designers definem a aparência direto na ferramenta de desenvolvimento
O Action Script é uma linguagem muito fácil de se aprender, e o Flash, oferece um suporte atravéz de um help que é um dos melhores do mercado de softwares.
Reduz a carga do servidor (o número de conexões necessárias para enviar dados para o usuário é mínimo e parte do processamento de informações acontece no computador do usuário)
Oferece uma vasta opções de componente para a utilização pré-moldada, o que facilita o desenvolvimento, na versão Flash 8 Professional, existem também componentes para a ligação com base de dados, XML e webservices, possibilitando a programação por Behaviors, onde um usuário que ainda não domina o Action Script 2.0, pode criar sua aplicação dinâmica usando essa paleta.
Script Assist, mais uma vez pensando nos usuário que estão começando esse recurso auto-completa o código e facilita muito o desenvolvimento.
Flash Lite, possibilitando criar aplicações dinâmicas para celulares
É possível se criar classes para a reutilização de codigos no flash
É possível criar seus próprios componentes.
Bom espero ter defendido bem essa ótima ferramenta de desenvolvimento web.
Caro Armando,
Parabens pelo artigo,
dentre as possíveis vantagens a diminuição do peso da página melhora a acessibilidade podendo serem vistos em dispositivos móveis sem necessidade de versão especial e por deficientes visuais, embora não são muitos os sites tableless que carregam atualmente esta segunda característica
Manuel
Achei interessante seu comentário, porém acredito que você não entendeu a essencia do que disse no meu artigo, apenas gostaria de passar que o tableless tem sim muitas vantangens, por ser um artigo não posso dar detalhes tim tim por tim tim
com números, formas de desenvolvimento, etc senão vira livro e muito cansativo de ler.
Por isso eu deixo a cargo de quem se interessa ir atras, se quiser posso lhe enviar o material que tenho.
Suas ideias são válidas sim, porém teriamos que medir o peso do site em com tabelas e
o peso do site sem tabelas, será que ficariam mais leves com tabelas ?
Um excelente ponto de partida é o site http://www.tableless.com.br
E o peso também não é a unica vantagem do tableless, além do código html limpo e fácil de ser lido, além das jás descritas no artigo.
Acredito que o tableless é uma forma ORGANIZADA de se desenvolver.
Criticas construtivas são sempre bem vindas.
Galera discutindo com uma outra pessoa, + ou – o mesmo tema, me veio isto em mente.
Usar tablesses é se prepara para web 3.0, a web semântica.
Hoje ainda é comum desenvolvedores utilizarem Tags de forma errada (tabelas para diagramação, para um titulo…), mas apenas as páginas desenvolvidas com o correto uso do (x)html, adicionada de RDF e/ou microformats estarão preparadas para o que está por vir.
Olá, na minha opinião, a questão de desenvolver um site em tableless todo em css e com as normas de accessibilidade tem dois significados importantes: padronização e qualidade no desenvolvimento de sites.
Quantos designers acham que fazem web mas não se dão nem ao trabalho nem de colocar um título na página ?
Porque as Industrias/Empresas, buscam ser certificadas nas ISO´s ? Porque mostra qualidade e competência. É um diferencial entre a concorrência.
Para nós desenvolver um site dentro do padrão é uma certificação de qualidade, já que é validado pelo W3C e isso agrega valor ao produto final.
Dá mais trabalho, precisa planejar o site antes de começar a criar, mas com certeza torna o projeto ainda mais profissional. Não só externamente como internamente.
Ser ou não ser tableless? na verdade o tableless é só um acrônimo, procurem algo como divless que encontrarão também, utilizar apenas tags com para escrever um site e não utilizar as divs. Acho que o âmago da questão aqui é a semântica, uma web relacional! otimizada para buscas! li um comentário acima que falava de um modelo de XML, JS e CSS. Na verdade o XHtml que substituiu é tudo isso. Outra questão importante de ser levantada ao uso dos padrões é além do cross browser mas sim um cross device. Um Xhtml é um documento XML válido. Qualquer plataforma por mais primitiva pode interpretar um XML e ler suas informações. Então um site semânticamente correto tem que trabalhar além da velocidade, busca, acessibilidade mas principalmente a disponibilidade. Disponibilizar seus serviços em qualquer dispositivo conectado a internet é sim um grande diferencial. Infelizmente as unobstrusive interfaces são trabalhosas, exigem um nível detalhamento e testes exaustivos, mas o resultado é fantástico. Imagine seu site no Computador, PDA, WAP 1.0 (sim para aquelas telas monocromáticas), na tv digital etc. Temos poucos desenvolvedores e empresas com esse cuidado e tecnologia, temos que pensar mais em nossos clientes e em nossas empresas. Viva a informação livre e 100% disponível =)
Armando o seu argumento da rapidez não tem validade porque é baseado em suposições e não métricas que comprovem as sua alegações. Se você tivesse feito o trabalho de casa e pelo menos medido a real rapidez de cada site, podia até suportar as suas conclusões, mas nem sequer isso fez.
Mas nem sequer medir precisava. Bastava ir ao site Alexa para ter os números sobre a velocidade relativa de carga da home page de cada site.
Mas não se incomode. Eu mesmo fui lá buscar os números para mostrar que todos esses sites são mais lentos que a maioria (mais de 50%) dos sites na Internet. Inclusivamente a velocidade de carga dos sites varia muito com fatores que nada tem a ver com usar CSS para definir o layout.
Abaixo segue uma tabela (não tem como usar CSS para layout aqui 😉 ) com vaores relevantes. Eis a legenda:
HTML – tamanho da home page em bytes
Comprimido – tamanho do HTML realmente servido no caso dos servidores que suportam compressão – como pode notar, o fator de compressão anda em torno dos 20% . Não admira que o Terra e UOL carreguem mais rápido que o da Adobe, que tem menos conteudo.
Imagens etc. – Número de imagens, arquivos CSS, Javascript carregados, bem como o seu tamanho total em K.
Imagens separadas – Indicação se o site serve imagens e etc. através dum domínio separado – isto afecta a velocidade de carga porque normalmente os browsers apenas abrem no máximo 2 conexões por dominio
Lento – porcentagem do total dos sites cujas home pages carregam mais rápido que os sites listados.
Alexa – URL do site Alex que informa a porcentagem de sites mais rápidos
Dominio HTML Comprimido Imagens etc. Imagens separadas Lento
nei.com.br 28707 Não 33 (217K) Não 55%
Alexa: http://www.alexa.com/data/details/main?q=&url=http://www.nei.com.br/
adobe.com 35144 Não 26 (185K) Não 84%
Alexa: http://www.alexa.com/data/details/main?q=&url=http://www.adobe.com/
terra.com.br 35150 8502 24% 60 (310K) Sim 85%
Alexa: http://www.alexa.com/data/details/main?q=&url=http://www.terra.com.br/
uol.com.br 88563 19933 22% 59 (266K) Sim 73%
Alexa: http://www.alexa.com/data/details/main?q=&url=http://www.uol.com.br/
O Gmail não foi medido porque o site em si exige uma conta no Gmail, pelo que o robot do Alexa não mediu.
Conclusão, se os sites usam ou não tabelas, não é um dado tido em conta acima, pelo que é um fator cujo peso na real rapidez de carga das páginas não foi medido.
De qualquer forma, mais de 50% dos sites auditados pelo Alexa são mais rapidos que todos esses exemplos. Concerteza uns usam tabelas e outros não. Logo, está demonstrado que o uso de tabelas em si não é o fator que torna qualquer site mais lento que outros que usam apenas CSS.
O uso de arquivos externos como imagens, Javascript e CSS é o fator que mais pesa. Não é uma grande novidade, porque sabemos que a carga de páginas é bem mais que o HTML inicial.
No entanto as imagens, Javascript e CSS normalmente ficam no cache do browser. Por isso, nos acessos seguintes restam outros fatores que não depende da carga desses recurso.
Portanto, como mencionei acima, resta o fator de compressão e outros não medidos que justificam porque um site como o da Adobe é mais lento que o UOL e o Terra.
Pessoal
Segue alguns exemplos de páginas web feitos em tableless:
http://www.nei.com.br
http://www.adobe.com.br
http://www.gmail.com
http://www.terra.com.br ( E todos os sites internacionais do terra também já estão em tableless)
http://www.uol.com.br
Percebam que a velocidade em que as páginas são carregadas, além do código fonte LIMPO e fácil de ter manutenção.
É lógico que há muito mais que tableless nestes portais além de um código muito bem escrito há também excelentes designers, programadores, e pessoas.
Uma pergunta deixo para os que defendem que é só modismo ou que isso é só para ganhar dinheiro Por que portais como estes migrariam suas páginas para TABLELESS ?
Muito obrigado a todos pelo feedback;
Concordo com que o Edy, falou!
Um bom exemplo de um site feito totalmente em tableless é o site da agência web PYPE.
Além de ser feito em tableless o site segue as normas do W3C (Web Standards) e normas de acessibilidade.
vale a pena conhecer esse site http://www.pype.com.br
Concordo plenamento com todos os q descordaram dessa matéria, isso é so para enganar trouxa e ganhar dinheiro fácil. Para fazer um coitado que não entende de sites acreditar que o seu site não está em um padrão e pagar mais para um charlatão fazer o mesmo site só que cheio de CSS..
Caro Armando,
Gostei muito de sua matéria e concordmos plenamente.
Atualmente temos um site todo voltado em Tableless e vimos a diferença que fez na troca de Tables para Div`s.
Com tableless ganhamos muita visibilidade nos buscadores e deixamos nosso site mais leve, inteligente e encontramos uma maneira mais rápida e simples de se fazer uma mudança no layout.
Mais uma vez parabéns pela matéria postada. Cada vez mais precisamos de profissionais como você, para dar uma vida nova a nossa internet.
Abraços
Ainda bem que há luz no fim do túnel. Desde que começou essa lenga-lenga de tableless tenho me perguntado muito sobre o assunto e não consigo obter uma resposta conclusiva sobre os reais e únicos benefícios do tableless, segundo os defensores é claro. Pior que parece uma cegueira total a respeito deste tema, por vezes já critiquei aqui mesmo os seguidores fieis que classifico como xiitas da web, são os mesmos que não gostam da microsoft, macromedia etc. Segundo eles e o mundo ideal que perseguem não haveria espaço para o capitalismo na era da informação. Tudo é colaborativo, voluntário, open source. Estamos vivendo por parte desses jovens um pensamento comunista em plena era da diversidade. Marxistas cibernéticos em busca das utopias, ou seja, criam suas prórpias regras e tentam impingi-las a todos como se fossem mandamentos sagrados. Não sei onde isso vai parar, mas com certeza a web é muito mais que isso.
O mais impressionante é que profissionais iniciantes ou que não tenham opinião bem formada acabam se rendendo aos devaneios de alguns.
Dos 6 pontos destacados no texto, qual mesmo não é possível obter sem o tableless?
cuidado com Agilidade e facilidade na mudança do layout do seu site, pois depois eles vão sair dizendo que criar layouts é uma tarefa fácil e não compensa os reais que devem ser desembolsados.
trabalho bom custa trabalho bom.
Olá Pessoal !!!
Dentre várias manifestações lidas uma a uma, em plena quarta-feira de cinzas, segue alguns comentários que não posso deixar de falar:
Existem sim várias outras formas de fazer sites com os mesmos beneficios que o tableless traz, porém a tendência do MERCADO é o tableless sim que uns aceitem ou não.
Outro ponto importante é separar o que é ferramenta do que é solução, você pode ter um excelente martelo e não saber martelar (cuidado com o dedo), Tableless é apenas mais uma ferramenta, que se nós profissionais WEB, soubermos utilizar podemos além de lucrar com isto desenvolver uma web mais accessível.
Ao contrário do que acham nós brasileiros somos os MELHORES do mundo em criatividade web !! vamos aproveitar.
Um abraço a todos !!!
Manuel,
baixa a bola, rapaz!
Abs,
MS
Concordo com as criticas sobre WEB 2.0, mas acho q o Armando pode estar certo sobre a indexação.
Com tableless utilizamos tags apropriadas na estrutura HTML que aumenta a relevância, e geralmente quem utiliza-se de tabelas joga tudo dentro da TD, diminuindo a importância do texto, ou coloca o conteúdo dentro de flash.
Sites tableless são melhor estruturados e facilmente indexados pelos buscadores. –> CORRETO
Respondendo ao comentário do Fábio, com data 20/02/2007 às 5:26 pm:
Não estou bravo com você nem com ninguém, mas é que tive uma sensação de déjà vu quando li o artigo e os comentários (esse tipo de discussão sempre gera flames :D).
?Acho que sites modernos usam eficiêntes gerenciadores de conteúdo, que separam tecnologia, design e conteúdo e não geram lixo. Desta forma fazemos as alterações necessárias, rapidamente, onde for necessário.?
Sim, concordo que o trabalho diminui consideravelmente. Mas imagine um sistema de publicação que utilize uma engine de templates que permite que certos artigos tenham um template específico, aplicável somente ao artigo (ou grupo de artigos) em questão. Agora imagine que um site grande (não vamos entrar no mérito se isso é bom ou não) tenha vários desses templates específicos. O peso da edição dos templates no caso de uma mudança no site volta a preocupar.
Sinceramente, acho que o tableless não é a solução perfeita, mas também não dá para ficar esperando essa solução aparecer. É aquele velho ditado: ruim com ele, pior sem ele…
Acho melhor deixar esse discussão pra lá…
Para os cara-pálidas, como eu, que gosta de coisa boa deixo alguns sites de CMS que gosto e uso.
Hum, você parece alguém que eu conheço! De qualquer forma, complementando a sua dica, existe também o Drupal (que é um pouco maior e pesado), disponível em http://drupal.org/.
Abraços
Fala ai Rodrigo Machado,
Não fica bravo comigo, e sim com o Armando, ele que postou este artigo inútil.
O comentário que fiz sobre os CMS diz respeito a esta parte:
Agilidade e facilidade na mudança do layout do seu site. Este é um ponto que traz um ganho substancial. Imagine que sua empresa resolva mudar a cara do site em função de uma data comemorativa ou mudança interna – não seria preciso desenvolver tudo de novo e a mudança pode ser feita rapidamente pois um site tableless utiliza um arquivo de layout e outro de conteúdo. Para mudar basta alterar um único arquivo e seu site já está de cara nova.
Usando um bom CMS você altera apenas o código do template e pronto. O layout do site (template) pode ser com ou sem tabelas não faz diferença. O conteúdo do site (textos e imagens) é totalmente independente do layout do site (template)e da tecnologia (PHP, Java, ASP…) usada no CMS.
Respondendo a seu comentário:
Como você acha que eles separam o design do conteúdo, cara-pálida? (Não confunda com a separação realizada pelo banco de dados.)
Ensinar como funciona um CMS foge ao escopo deste artigo, mas o template responsável pelo layout do site pode ser feito com ou sem tabelas, com ou sem css, no Dreamweaver ou não. É apenas um arquivo html com algumas tags especiais que determina onde o conteúdo e a navegação será impressa.
O template pode ser ou não armazenado em um banco de dados , assim como o conteúdo. O banco de dados pode ser um arquivo txt, ou o próprio arquivo da página, tomando os devidos cuidados com a segurança). Isto vai depender da forma como o CMS foi projetado.
Para os cara-pálidas, como eu, que gosta de coisa boa deixo alguns sites de CMS que gosto e uso.
http://typo3.org/
http://ez.no/
http://www.joomla.org/
Para mais opções
http://www.opensourcecms.com/
Abraços
Bom artigo, muita gente ainda não acredita nessa nova tendência que ja mostrou vir para ficar.
Mas vale ressaltar que seu site ser tableless não significa tudo, é necessário escrever um (x)html semântico para usufruir ao máximo dos benefícios citados no artigo.
Marcelo, parece que você não me entendeu bem.
O Google apenas revela critérios de indexação e pesquisa mostrados na página que mencionei.
No que toca ao design eles apenas revelam estas diretivas ao público:
http://www.google.com/support/webmasters/bin/answer.py?answer=35769#design
Tudo o que você alegar que não está ali explicito é mera especulação sua.
Portanto, o que você diz sobre a importância do posicionamento do texto nas páginas é pura especulação sua, dado que se baseia em suposições suas ou boatos de impressões de outros que você leu em algum lado.
Até lhe posso dizer que de fato tem como otimizar as páginas para indicar onde está o conteúdo que importa, por exemplo para maximizar a relevância dos anúncios do AdSense que puser nas suas páginas.
Se você não sabe que critérios são esses, não lhe posso revelar esses critérios porque o Google não publicou essa informação ao úblico em geral e eu não tenho permissão para o fazer, mas posso garantir-lhe que não tem nada a ver com CSS, tabelas, posicionamento de texto nas páginas, ou o quer que seja.
Mesmo assim esses critérios têem apenas a ver com a indexação feita pelos robots do AdSense, e não com os robots de indexação da pesquisa organica do Google. Logo, nem se pode assumir que indexar para uma coisa implica que seja um boa critério para otimizar para a outra coisa.
Resumindo tudo é especulação. Por experiência própria, o que posso especular é que o que importa não é tanto o posicionamento do texto, mas sim a enfase que dá ao conteúdo. Normalmente usar tags H1, H2, H3, etc.. e até B e STRONG ajuda a indicar que texto tem mais peso para indexar cada página. Texto com esses tags pode até ficar dentro de tabelas ou div com layout definido com RSS. Pela minha experiência o layout em si é irrelevante.
Caro Armando:
Nós gostamos de usar tableless, porém não é um mantra, especialmente porque o tempo para editar uma página com tableless é muito MAIOR !
É impressionante a diferença ! Com tabeless demoramos uma tarde para alterar a posição de alguns elementos na página e a mesma página com tabelas a alteração é realizada em minutos no Dreamweaver…
Oi Manuel, sobre indexação em sites de busca: seu comentário é contraditório. Vc mesmo afirma que os buscadores não revelam os fatores importantes de indexação e depois cita uma página do Google dizendo que ali não fala nada sobre a importância do uso de CSS. Claro que não, né…
Os buscadores não revelam pois eles ganham dinheiro com links patrocinados e não com otimização de busca orgânica.
Os buscadores indexam apenas texto, é fato, por isso a forma de disposição dele na página é muito importante e tableless realmente ajuda na compreensão pelo robô de busca. Mas esse é apenas um dos diversos fatores para obter melhor posicionamento nos resultados.
Gostei muito da matéria, porém não gostei dos comentários acima. Como disse o Armando, existe poucos profissionais qualificados na web, e por isso que surge esses amantes de tabela, que não sabe nem o que esta falando e ainda vende essas coisas para seus clientes. É por isso que temos tantos sites mal feitos no Brasil. Não só por falta de conhecimento do cliente em procurar uma agência competente, e sim por desenvolvedores mal informados, que sai de cursinhos de 6 meses e vende site por preço de banana.
Vamos evoluir minha gente. Chega de tabelas, chega de fazer sites em tela de visualização do dreamweaver, e vamos programar com seriedade e profissionalismo atendendo as novas tendencias da tecnologia. Porque só assim os clientes irao ver e entender que a internet é uma fonte potencial de investimento.
Olá Armando, primeiramente parabéns pelo artigo.
Agora, respondendo ao primeiro comentário:
Uma técnica comum com sites que utilizam tabelas para formatação do layout é o uso de pixel null, pequenas imagens transparentes que o especiaista coloca para fazer espaçamentos, etc. Ora, como o CSS foi feito especificamente para cuidar do problema de formatação, você elimina o uso desse tipo de técnica. Menos imagens, mais leve a página fica.
Quer dizer que para tornar meu site acessível a deficientes físicos eu tenho de fazer uma outra versão, com o mesmo conteúdo? Ou seja, a cada atualização no site eu tenho que atualizar essa página especial? Você realmente acha que isso não é um problema?
Site não-tableless com CSS? Ora, se você utiliza tabelas para formatação de layout, a única coisa que sobrou para alterar via CSS é a formatação dos textos (isso não é mudança de layout). CSS pode fazer muito mais que isso.
Menos imagens = páginas mais leves…
Do ponto de vista técnico, alterar tabelas que são usadas para layout via JavaScript não é nada fácil. Claro, a menos que você utilize o (proprietário) innerHTML
Sou totalmente adepto à sites tableless, e reconheço que eles acabam por ficar mais leves, embora dêem muito mais trabalho para fazer e para ficarem compatíveis com todos os browsers.
Opa! Você contradisse a sua primeira observação…
Acho que todos precisamos estudar um pouco 🙂
Agora, respondendo ao segundo comentário:
Acho que sites modernos usam eficiêntes gerenciadores de conteúdo, que separam tecnologia, design e conteúdo e não geram lixo. Desta forma fazemos as alterações necessárias, rapidamente, onde for necessário.
Como você acha que eles separam o design do conteúdo, cara-pálida? (Não confunda com a separação realizada pelo banco de dados.)
Desculpe se não fui muito educado em algumas respostas, mas realmente acho que a maioria dos profissionais de internet acha que web se resume a Dreamweaver (sem ofensas).
Abraços a todos,
Rodrigo
Sensação de déjà vu. Talvez porque isso muito lembra aqueles famosos sites inteiros em Flash programado, que podiam perfeitamente terem sido feitos em html normal e agora ficam reféns nas mãos do programador Flash. Ok, next try. 🙂
Acho que você está equivocado, padrões W3C não quer dizer que o site deve ser tableless.
Ela específica que não devemos usar tabelas para formatação e posicionamento do layout na página. As tabelas devem ser usadas para listas e outras aplicações onde elas são imprescindível.
…
* Melhor posicionamento nos sites de busca
* Diminuição do uso de banda entre 50% à 75%
* Site acessível até para cegos e outros deficientes fisicos
* Agilidade e facilidade na mudança do layout do seu site
* Rapidez para o acesso do seu usuário
…
Todas as vantagens que você mencionou pode ser facilmente resolvidas em qualquer site! tableless ou não.
Acho que sites modernos usam eficiêntes gerenciadores de conteúdo, que separam tecnologia, design e conteúdo e não geram lixo. Desta forma fazemos as alterações necessárias, rapidamente, onde for necessário.
Quanto a Seu site preparado para Web 2.0, vamos parar de usar este termo para vender mentiras. Dificilmente um site institucional de uma empresa vai incorporar as funções a que este Cliché está relacionado.
Abraços
Olá Armando,
Discordo de vários pontos do seu artigo, e envio meus comentários abaixo:
* Diminuição do uso de banda entre 50% à 75%
– Isso depende do caso. Somente se o site utilizar muitas tabelas, você terá uma diferença considerável, caso contrário, não há vantagem.
* Site acessível até para cegos e outros deficientes físicos
– Isso sempre foi possivel fazer com sites que não são tableless. Existe uma centena de sites que apenas direcionam o leitor de conteúdo para uma parte especifica do HTML.
* Agilidade e facilidade na mudança do layout do seu site
– Isso não tem NADA A VER com ser tableless. Isso tem a ver com CSS. Se você construir um site Não-tableless utilizando CSS, você terá a mesma facilidade na mudança do layout.
* Rapidez para o acesso do seu usuário
– Como disse acima, depende do caso.
* Seu site preparado para Web 2.0
– Quer dizer que sites que não são tableless não permitem que usuários editem conteúdos e escolham o que querem ver? Sem comentários…
Finalmente, me desculpe pelas observações contrárias.
Sou totalmente adepto à sites tableless, e reconheço que eles acabam por ficar mais leves, embora dêem muito mais trabalho para fazer e para ficarem compatíveis com todos os browsers.
Acontece que em minha opinião, você desconhece as verdadeiras vantagens de criar um site tableless, e no seu lugar, eu estudaria um pouco mais antes de escrever para um site com tanta visibilidade como o WebInsider, onde o seu atual e os seus futuros empregadores poderão ler e tirar conclusões sobre seus conhecimentos.
Abraço,
Marcelo
PS: Outra coisa: Tableless não tem nada a ver com Padrões Web. Nada!
Sinceramente eu pensava que já tinha acabado com a mania do tableless . Essa mania é velha e já foi demonstrado muitas vezes que os pseudo-argumentos a favor já foram derrubados por melhores abordagens, que pelo que parece ainda nem todos que trabalham no desenvolvimento de sites conhecem:
1 – Primeiro tableless implica desenhar sites com a disposição (layout) definida por div/span com estilos CSS e não usar tabelas.
Porém todo mundo sabe que usar tabelas não é pecado. Inclusivamente existem coisas que requerem alinhamento de elementos simultaneamente na horizontal e vertical que você não conseguem usando apenas CSS por mais que se esforce.
Aliás achei este outro artigo muito engraçado, tirando o sarro sobre as coisas em que os designers Web ficam perdendo tempo, incluindo martelando no CSS para tentar usar emular layouts que apenas podem ser conseguidos usando tabelas.
http://www.marylandmedia.com/2006/12/time-breakdown-of-modern-web-design.html
2 – Web standards W3C
Os padrões da W3C não dizem para não usar tabelas. Apenas recomendam usar CSS para definir a disposição das páginas sempre que possível. Como nem sempre é possível, é besteira ficar perdendo tempo forçando a barra.
Curiosamente a versão das normas de HTML que introduziram as tabelas até é a mesma versão que introduziu o CSS.
Você pode usar tabelas e CSS na mesma página de acordo com o efeito pretendido. Agora ficar obcecado com o tableless e perder um monte de tempo evitando usar tabelas para conseguir algo que nunca vai dar certo, o seu cliente não vai entender. Vai achar que você é maluco.
Seja como for os padrões Web da W3C também não são nenhuma biblia. Se você fizesse apenas o que diz o W3C, você não estaria usando AJAX por exemplo.
A classe XMLHttpRequest que é usada em sites AJAX na verdade foi inventada pela Microsoft nos dias do Internet Explorer 5.5. A expressão AJAX apenas se popularizou depois que os browsers da familia Mozilla passaram a suportar o XMLHttpRequest, e estourou quando o Gmail começou a usar AJAX para tudo.
Só bem depois o W3C tentou padronizar o XMLHttpRequest. Nesta altura do campeonato, duvido que essa padronização adiante alguma coisa.
No entanto, o XMLHttpRequest é limitado e problemático. Ironicamente a solução mais confiável criar sites AJAX, portanto atualizando as páginas sem as recarregar, é usar o velho IFRAME escondido, que faz parte dos padrões de HTML W3C desde há muito tempo. Porém deve ser usado de forma nunca antes prevista pelo W3C.
Usando IFRame escondido é limpinho. Funciona em qualquer browser com o mesmo o HTML e Javascript e sem usar truques especificos de browsers.
Você consegue evitar os problemas de incompatibilidade e restrições de segurança do XmlHttpRequest, que por exemplo impedem o envio de arquivos e outras coisas que estão explicadas neste artigo:
http://www.phpclasses.org/blog/post/51-PHPClasses-20-Beta-AJAX-XMLHttpRequest-x-IFrame.html
3 – Posicionamento nos sites de busca
Não sei donde tirou essa ideia. Os sites de busca indexam apenas o texto descartando as marcas e atributos HTML. Pelo que é irrelevante se você usa layout com CSS ou não.
De resto a maior parte das coisas que se lê sobre os critérios de indexação dos sites de pesquisa são meras especulações. As empresas de busca (Ok, o Google porque os outros vão atrás) não divulgam esses critérios. Se duvida veja esta página do Google de recomendações para Webmasters e veja lá se acha onde eles dizem para usar layout apenas com CSS.
http://www.google.com/support/webmasters/
4 – Diminuição do uso de banda
Esse é um argumento velho e muito desatualizado.
Se você tem um site feito todo com tabelas que mostra o que você quer, a maneira mais eficiente de diminuir o consumo de banda é usar compressão HTTP.
Compressão HTTP é um recurso disponível desde pelo menos o ano 2000. Se você usa o Apache 1.x, basta habilitar e extensão mod_gzip. Se usa o Apache 2.x, basta habilitar a extensão mod_deflate. O Microsoft IIS também suporta compressão, mas não sei dizer o que fazer porque nunca usei esse servidor Web.
Normalemnte consegue compressão de 5:1 ou mais (reduz para 20% ou menos). Isso significa que sem mexer no HTML você consegue servir uma página 5 vezes menor.
Claro que se você usar um layout apenas com CSS, talvez economize um pouco porque evitou redundância de atributos.
Em teoria se usasse layout com CSS e compressão, até poderia conseguir páginas menores. Porém na prática o ganho de usar layout definido sem CSS ou com CSS, depois de aplicar a compressão o ganho é infimo. O motivo é simples. Os algoritmos de compressão são eficientes porque eliminam a redundância.
Resumindo, se você tem um site que funciona, mudar tudo só para definir o layout com CSS e conseguir páginas menores, vai perder muito mais tempo do que habilitar as extensões de compressão no servidor Web.
Não quer dizer que você não deva refazer o layout para usar o CSS. Apenas quer dizer que você consegue muito melhores resultados em muito menos tempo usando uma tecnologia muito mais eficiente para economizar consumo do banda, que é o uso de compressão.
Para além disso note que usar muitos arquivos CSS e Javascript separados das páginas obriga a um maior número de acessos aos servidores para carregar as mesmas páginas, pelo menos o primeiro acesso. Pode usar CSS e Javascript separadamente, mas com ponderação.
Um exemplo de site que dou como exemplo disso é o Digg.com . Já reparou como demora para carregar quando você acessa a primeira página? Pois é, exageraram na dose de arquivos CSS e Javascript separados da página.
5 – Site acessível para cegos
Em teoria sim, mas na prática são raros os sites que usam CSS alternativos para facilitar a leitura da página com sintetizadores de voz.
Acho até sacanagem falar em acessibilidade de sites para cegos, quando muitos que pregam o tableless não estão nem aí para eles. Acho que os cegos merecem mais respeito.
Se você não tem tempo ou dinheiro para fazer um site preparado para cegos, é melhor nem alegar que layout com CSS é que vai resolver porque na prática você não vai fazer nada pelos cegos.
6 – Rapidez para o acesso do seu usuário
É a mesmo argumento de menor consumo de banda.
A propósito de linha discada hoje em dia quase todos provedores usam proxies transparentes que comprimem as páginas antes de enviar para os browsers dos usuários de linha discada. Funciona até com todos sites que não comprimem suas páginas no servidor.
Lembra-se o acelerador do UOL e doutros? É isso aí, compressão de páginas.
7 – Web 2.0?
Web 2.0 não tem nada a ver com design, layout, nem mesmo com tecnologia, nem sequer AJAX. Web 2.0 tem apenas a ver com proporcionar aos usuários meios para que possa participar nos sites de forma relevante.
Por isso referir Web 2.0 neste artigo me parece-me ser um argumento forçado e portanto despropositado.
Resumindo, existem muitos motivos para evoluir os sites. Mudar apenas o layout para usar apenas CSS e não tabelas não me parece boa ideia para o cliente que já tem um site que funciona, porque como expliquei apenas vai gastar dinheiro à toa.
Por isso este artigo parece-me que foi inventado para justificar a cobrança dos clientes por um trabalho de alteração do HTML que eles nem precisam.
O tabeless é de fato uma forma de se trabalhar com muitas vantagens mas acho uma pena que tantos tentem dar a ela ares sagrados como fosse a mesma a messias do web designing. Para um cliente, talvez realmente não haja transtornos neste formato, mas para aqueles que o desenvolvem já não se pode dizer o mesmo. O CSS por vezes dificulta mais do que facilita, cobra certas redundâcias desnecessárias, e não oferece alternativas a 100% das funções que podem ser obtidas com tabelas. Já passeei em vários fóruns tentando encontrar soluções para algumas limitações do CSS, e muitas vezes só tive como resposta verdadeiras gambiarras que nada mais faziam que maquiar uma tabela com atributos DIV. No fundo, penso que isso tudo não passa de bobagem e o melhor a se fazer era dosar da melhar forma possível tudo aquilo que oferecem as DIVs e as Tabelas.
O conceito de certa forma recente de criar sites tableless é interessante, no entanto ainda tenho me pego pensando mais no que leio sobre Semântica, sobre usar cada elemento para sua devida necessidade.
Seria demais pensar numa possibilidade de projeto onde se usasse o xml para conteúdo, css para formatação, html para estruturação?
Enfim, de certa forma usar cada elemento e técnica para seu devido fim, dessa forma um serviço ficaria totalmente descentralizado após um bom projeto.
Sei que é sonho, mas imagino um mundo onde o designer faça o layout, o driagramador faça apenas a formatação e transponha de imagem crua para estrutura, um funcionário responsável por conteúdo…
No demais, meu primeiro comentário aqui, mas minha admiração pelo trabalho contínuo dos colunistas.
Meus parabéns, texto salvo (com os devidos créditos) para ser exposto a qualquer cliente (ou superior) quando no questionamento do porque usar tableless?
Dê exemplo de sites desse tipo.