Tableless or not?

Os estilos do site, pelo menos nas páginas que vi, ficam num arquivo css separado bonitinho.

E qual o problema das tabelas? Fica tudo tão alinhado e bonito @.@.

Juro que não entendo muito esta idéia de Tableless. Sim, fica mais bonitinho, dá para fazer magias com CSS. Mas isso não quer dizer que table não deva ser usada, etc etc etc. Até onde eu saiba, <table/> faz parte da HTML 4.01 que, até hoje pela manhã quando eu li os jornais, era um padrãozinho W3C.
Chutando beeeeem o balde, acho que este lance de Tableless é modismo de designer

P.S.: recomendo que se crie um novo tópico para discutir isso e deixar este cá só para receber as submissões de logos do concurso

Lynx eh a ultima das nossas preocupacoes

Rafael

Na verdade Tableless… é tipo use a coisa certa no lugar certo! e pessoalmente acho interessante a idéia de Tableless. com relação a site do GUJ o Site não é Feio e acho bem dividido e navegável(Principalmente depois da versão 2) . agora querer usar Tableless no GUJ Fica a critério dos Administradores do portal, por mim como frequentador desta comunidade a qual tenho muito respeito está ótimo…

Más que Tableless é um negocinho legal isso é mesmo pessoal !!! e não acho ser modismo de Webdesigner!

Valeus!

putz achei q tinha sido censurado!! pior q moveram minha msg bem na hora q eu respondi e a resposta ficou la… vai aqui de novo:

“LIPE”:

Os estilos do site, pelo menos nas páginas que vi, ficam num arquivo css separado bonitinho.

E qual o problema das tabelas? Fica tudo tão alinhado e bonito @.@.

fica separado naquelas… hehehe veja logo a 1a tabela do site, ja tem um bgcolor="#5E729F"… isso nao eh separar estilo em css

e o problema de tabelas? nao ha dados para serem tabulados! o w3c nao recomenda seu uso q nao seja para tabular dados. mais aqui: http://www.w3.org/2002/03/csslayout-howto

“Daniel Quirino Oliveira”:

Juro que não entendo muito esta idéia de Tableless. Sim, fica mais bonitinho, dá para fazer magias com CSS. Mas isso não quer dizer que table não deva ser usada, etc etc etc. Até onde eu saiba, <table/> faz parte da HTML 4.01 que, até hoje pela manhã quando eu li os jornais, era um padrãozinho W3C.
Chutando beeeeem o balde, acho que este lance de Tableless é modismo de designer

nao eh modismo de designer nao! veja o link do w3c q eu passei acima. eles dizem q o conceito de tabelas foi desvirtuado, e eu concordo. tabelas sao pra tabular dados, nao pra serem usadas pra layout.

os beneficios do tableless: alem de usar corretamente as tags, permite realmente isolar o design em css

pois nao devia ser! e qdo digo lynx, falo de todos os browsers q nao sao os top (IE, Mozilla, Opera, Konqueror, Safari), browsers para cegos etc.

logico, se fosse mto dificil dar suporte a todo mundo, nao compensaria. mas eh tao simples! eh so fazer um layout q, alem de estar de acordo com as regras do w3c, siga as recomendacoes.

pois nao devia ser! e qdo digo lynx, falo de todos os browsers q nao sao os top (IE, Mozilla, Opera, Konqueror, Safari), browsers para cegos etc.

logico, se fosse mto dificil dar suporte a todo mundo, nao compensaria. mas eh tao simples! eh so fazer um layout q, alem de estar de acordo com as regras do w3c, siga as recomendacoes.

Para outro tipo de site ate concordo, mas nao para o guj. O discurso eh bonito, mas um monte de div e css vai ser mais incompativel que tabelas.
Ate o links ( versao melhorada do lynx ) monta tabelas e frames corretamente.

Para voce ter uma ideia, olhe as stats: http://www.nedstatbasic.net/s?tab=1&link=5&id=1833070

Mais uma vez, concordo que um html bem feito eh interessante, mas tabelas tem mais compatibilidade com os browsers que css.

Rafael

mas a ideia de fazer um html bom com layout totalmente separado em css eh justamente ser compativel com todos os browsers!! eh logico q o lynx nao vai ver o css. mas se o html for estruturado, o resultado mostrado para todos os browsers vai ser mais consistente… desde o IE ate o lynx

e uma estrutura correta de layout eh usar as tags para os propositos para os quais elas foram inventadas!! por exemplo, o q eh melhor: criar um div com id=titulo e formata-lo com css pra que ele fique lindo, ou fazer um h1 e formata-lo da mesma forma no css?? fazer o h1, logico!! pq? pelo motivo q vc falou: nem todos os browsers entendem css ou formatacao de layout; eles mostram o conteudo de acordo com o q aquela tag indica (pela especificacao do w3c). num browser para cegos, por exemplo, a entonacao de um elemento div eh comum, mas a de um elemento h1 eh mais forte, para enfatizar q aquilo eh um titulo.

da mesma forma com as tabelas. ao separar o layout em colunas, vcs querem eh aproveitar o espaco da tela e nao tabular dados. mas tabelas foram feitas para tabular dados!

logico, tudo isso pode parecer inutil para um site como o guj (ou alguem conhece algum cego programador??). mas eh q fazer um site corretamente eh algo tao simples (mais simples q entupir de tabelas, eu diria) q vale a pena. um beneficio real seria a diminuicao do trafego de dados, pois o html seria bem mais curto; para um site garnde isso pode fazer diferenca

vantagens do tableless (copiado discaradamente de tableless.com.br):

Acesssibilidade
Seu site fica acessível a um âmago maior de pessoas: Deficientes, usuários de mobiles (celulares, SmartPhones, PDA´s, etc), Desktops, robôs (google, bloglines)

Compatibilidade
Compatibilidade está ligada de alguma forma com a acessibilidade. Fazendo seu site seguindo os web standards, ele ganha uma compatibilidade maior entre os browsers existentes. Browsers que leêm telas, browsers de dispositivos móveis, e a grande maioria que são os browsers de desktop: Opera, Mozilla, Netscape, Internet Explorer, e tudo quanto é outro browser atual. Seu site fica melhor visualizado.

Manutenção
Como seu código fica organizado, formatação de um lado e informação de outro, fica muito mais fácil de você fazer manutenção no código ou até mesmo mudar o design todo do site, neste último caso, você pode fazê-lo mudando apenas um arquivo.

Isso nao soa como vantagem do tableless. Alias, compatibilidade sera ate menor. Faca um site usando os ultimos recursos de css e ele nao vai funcionar em browsers da geracao 5 pra tras, oque eh muito usado ainda.

Um html com tabelas bem escrito / formato tem tantas “vantagens” quanto essas. ( e sobre o quesito “kb”, sempre da pra compactar o conteudo antes )

RAfael

Alguém aqui já tentou fazer um site tableless??

Falando na boa: É uma MERDA!

Pq?? os padrões existem… mas quem disse que o IE implementa direito?

Você faz, funfa bunitinhu no mozilla, no IE fica bixado…
vc faz um hack pra funfar no IE, bixa no mozilla…

Tem que ter muito saco e tempo pra fazer… ou então já ter apanhado muito pra pegar todas as “manhas”…

“tableless” nao eh uma palavra.

Designs estilizados com CSS, quando bem feitos, nao apresentam nenhum dos problemas que o Rafael aponta, mas apresentam todas as vantagens que o Sergio apontou. Logo, nao ha desculpa pra continuar usando tables pra layout a nao ser ignorancia ou preguica

Essa discussao costuma ir loooooooonge em listas de discussao sobre webdesign, mas, no fim das contas, tudo se reduz a debater se o HTML que a gente conhece eh mesmo uma linguagem de marcacao ou uma linguagem de diagramacao. Eu diria que, se vc quer usar HTML como linguagem de marcacao, entao usar CSS pros layouts faz todo o sentido do mundo. Se nao, entao fazer layouts com tabelas ou CSS nao faz diferenca. E, se nao faz diferenca, entao pq nao concordar com os caras do outro lado do muro? :mrgreen:

“Vegetto”:

Alguém aqui já tentou fazer um site tableless??

Falando na boa: É uma MERDA!

Meu blog eh “tableless”, o blog do Umlauf, idem, e o blog da maioria da galera no Jablo tambem. Qual o problema, mesmo?

opa, agora a discussao ganhou alguem de peso!

era isso q eu tava tentando falar pro rafael! tudo o q ele falou eu rebati com a ideia de html para marcacao e css para diagramacao. a ideia da compatibilidade eh mto mais real no mundo q eu descrevi do q no q o rafael ta falando…

O meu é semi-tableless… hehehe
Ele costumava ser tableless, mas quando coloquei o quadrinho de busca fiquei com preguiça de adaptar o código padrão, então tem uma tabelinha só para ele.

Mas apesar de eu concordar que ser “tableless” é uma prática melhor de design, para 90% dos usuários acho que não chega a fazer diferença como o site foi implementado.

“cv”:

“Vegetto”:

Alguém aqui já tentou fazer um site tableless??

Falando na boa: É uma MERDA!

Meu blog eh “tableless”, o blog do Umlauf, idem, e o blog da maioria da galera no Jablo tambem. Qual o problema, mesmo? :D

Calma calma, o que eu quis dizer é que “fazer um site inteiro deixando de usar tabelas(ou fazer tableless) é uma merda”

não que os sites feitos em “tableless” sejam uma…

eu me expressei mal…

eu mesmo lembro de ter ligo algo no seu blog sobre isso… você havia comentado que o calendário tinha parado de funfar no ie…

[]´s

Sim, mas nao confunda a minha incompetencia (era um erro de sintaxe craaaasso no CSS, que o om achou) com a incompetencia da solucao

De qualquer maneira, as “vantagens” do site tableless.com.br nao sao fortes. Aquilo nao eh uma “feature” provida somente por tal “mecanismo”. Qualquer estrutura bem feita ira funcionar direito.

Rafael

De qualquer maneira, se algum maluco quiser tentar fazre o guj tableless e funcionar, eh soh mandar para a gente ;). Ou essa vai ser mais uma do estilo “… vamos todos seguir os padroes, por um mundo melhor”, mas que na hora de fazer mesmo, ninguem aparece?

Rafael

no 1o post eu disse q se tiver tempo eu faço… quem sabe no feriado. mas a ideia era as pessoas se solidarizarem… hehehe era pra ir junto com o concurso de logo

FEITO!!!

bom, eu nao tinha nada pra fazer (ate parece) nessa madrugada e fui a fundo no negocio do tableless. fiz todo o layout do guj tableless e com todas as formatacoes no css.

da pra ver aqui na minha maquina: http://201.6.86.169/~sergio/guj.com.br/
(se tiver mtos requests, eu mando para um servidor descente…)

aproveitei e dei umas arrumadas em alguns “detalhes”, como prever resolucoes de grandes.

vc vera q ainda ficaram alguns negritos e italicos no html (ao inves de por no css), optei por fazer assim para q esses destaques aparecessem tbm em browsers tipo lynx

alem de todas as vantagens, veja q legal o style-sheet alternativo (mude o estilo no firefox). APENAS com css conseguimos fazer algumas mudancas (limitadas) na disposicao da pagina inicial.

bom, eu fiz baseado em modelos largamente usados na internet, mas pode ser q haja problemas para alguem. eu testei no linux apenas, no Firefox 0.9, Opera 7, Konqueror e IE 6 (rodando no Wine).

essa eh uma primeira versao. vejam ainda no q podemos melhorar…

prefiro o atual que se redimensiona na resolução do seu monitor.
E não vou comentar sobre tableless porque não sei o que é isso (odeio layout em web).

:shocked!:

Grande atuação, xará!

Alías, o GUJ tá precisando de um botox, né?

Olá

Parabéns! Gostei bem mais.

Para mim não foi novidade nenhuma facilidade em fazer. Trabalho em uma empresa desde abril e quando entrei lá todo o site era feito usando tabelas. Fiz um trabalho de convencimento com o web designer e ele experimentou designs tableless. No início ele demorava mais tempo com tableless do que com as tabelas tradicionais. Mas ele insistiu e hoje ele faz os projetos tableless em menos tempo do que com tabelas. Ao fazer os novos projetos assim, ele gostou tanto que atualmente está refatorando nosso site para ficar tableless.

As vantagens são inúmeras. Para quem gosta de colocar figuras em seu site as tabelas limitam um pouco a criatividade. Sem tabelas, o designer realmente domina o tamanho das figuras. Um outro benefício fácil de perceber é que os sites tableless carregam mais rápido (falo de sites convertidos comparando o antigo com o novo).

Tableless não significa deixar de usar tabelas no site inteiro. Uma equipe de desenvolvimento pode demorar um pouco até conseguir entender o novo modo. Mas para mim é uma direção para onde devemos seguir.

[]s
Luca

Olá

“Umlauf”:

Alías, o GUJ tá precisando de um botox, né? ;)

Umlauf, talvez refatorar o GUJ para ficar com a mesma cara seria trocar seis por meia dúzia. Mas esta sua idéia é muito legal. Acho que novo logo + nova cara + tableless seria um botox plus plus muito legal!

[]s
Luca

Caracaaaaaaaaaaaaaaaaaaaaaa. Cara, curti muitooo mesmo. :shock: :shock:

ae galera, valeu pelo apoio! hehehe
q tal incluir um novo design no concurso?

bom, do jeito que eu fiz o GUJ Tableless, com isolamento TOTAL do estilo no css, alterar o estilo do GUJ podera ser feito somente alterando o css. eu gostei do botox do umlauf, bem melhor q o atual. mas quem sabe nao possamos melhorar mais??

ainda sobre o tableless, alguem aí poderia testar em outros browsers?? eu nao tenho ideia de como fica no Mac (IE/Mac e Safari) ou em IE4 e IE5. como disse, imagino q nao havera problemas, mas vai saber

Acho meio complicado juntar duas coisas diferentes em um único concurso. E se o melhor desgin não for da mesma pessoa com o melhor logo?
Mas vamos discutir com os patrocinadores a viabilidade de fazer um segundo concurso.

Mas tem um detalhe sobre o design: não sei até que ponto adianta a pessoa fazer o HTML + CSS. O site do GUJ é dinâmico, então o ideal seria o participante pegar os fontes do GUJ 2 e já adaptar a camada de view inteira.

Portanto, se o GUJ for abrir mesmo o novo concurso ou adaptar o atual, daremos mais detalhes em breve.

Eu sou a favor de renovar o layout do Guj e até agora o do umlauf ganha meu voto

Olá

O concurso é para o novo logo e já tem patrocínio para isto, certo?

O design tableless da página inicial foi uma oferta do Sérgio, certo Sérgio?

Se o Umlauf ofertar o design que ele já mostrou acho que poderíamos fechar tudo desse jeito que para mim já está ótimo.

A entrada do novo site ficaria marcado para depois do resultado do concurso do logo, talvez com uma bela festa de premiação do logo, lançamento do site e congraçamento.

[]s
Luca

eu topo ajudar num novo design (e acho q o umlauf e outros tbm) sem rolar concurso premiado. pode ser um concurso informal mesmo…

bom, nao sei como funciona a camada view do guj, mas imagino q, com html+css prontos, seja trivial colocar isso no site

isso, fiz mais por diversao mesmo e, como o rafael disse, “por um mundo melhor” hehehe era pra mostrar pro povo q o negocio eh simples, rapido e eficiente.
sem ambicoes materiais! (logico q se alguem quiser contribuir com o rapaz aqui, eu nao vou achar ruim… hehehehe)

A parte de conseguir mais um patrocínio está realmente complicada. Mas a gente pode fazer uma vaquinha e juntar uns 10 convites de GMail para você tentar vender em algum site de leilão por aí! hehehehe

“Bani”:

A parte de conseguir mais um patrocínio está realmente complicada. Mas a gente pode fazer uma vaquinha e juntar uns 10 convites de GMail para você tentar vender em algum site de leilão por aí! hehehehe

putz, alguem ainda compra isso?! tenho alguns encalhados aqui… ninguem mais quer, nem de graca

PS. NAO USE ESSE TOPICO PRA ME PEDIR CONVITE! SE QUISER, ENTRA NO MEU BLOG…

A idéia é essa mesmo. Eu tava pensando há algum tempo em sugerir uma cara nova e achei o concurso do logo + sugestão tableless do Sérgio o momento ideal pra isso, embora sejam coisas distintas (concurso do logo x novo layout). Pus minha sugestão de logo no novo layout só pra fazer propaganda mesmo :mrgreen: , mas se não for o meu o escolhido e adotarem o layout não vou ficar (muito) triste.

Como o Sérgio disse, dá pra melhorar bastante.

Tá ofertado, e podem contar comigo pra implementação do GUJ botoxizado+logolizado+tablelesslizado, seja qual for o logo/layout escolhido.

Só uma dúvida. Porque todo mundo acha que ser tableless é simplesmente tirar as tables e sair tacando DIV feito louco? Pô, existem alternativas muito melhores que resolvem perfeitamente muitos problemas e ainda por cima são mais lógicas.

concordo! mas acho q nesse artigo o cara exagera um pouco… colocar um h2 dentro de um li nao fica mto legal eu acho. eu penso bastante na forma como as listas serao renderizadas em browsers texto ou em pdas.

se vc olhar o codigo q eu fiz do guj tableless, tem exatamente esse exemplo do artigo. mas eu coloquei o h3 fora da lista e prefiro assim.

Sérgio, aquilo ali foi só um comentário, eu nem cheguei a ver o fonte do GUJ depois que tu recalxutou ele.

ok, tbm so comentei. acho legal discutir essas coisas e melhores praticas…
ainda pretendo melhorar o codigo do guj tableless colocando algumas tags especificas, como address, titulos (h1) e tirar alguns divs

testei no IE 5 tbm (acabei de coloca-lo no meu wine) e ta ok igualmente

Eu. Um carinha que fez um curso na FEC/UFF comigo emd ezembro, ele teve que abandonar o curso, mas era sóciod e uma consultoria e prograamdor, já tinha feito o cursod e Java e segundo o Professor Carlos Ribeiro era um excelente programador. Usava um notebook com aqueles programas especiais com áudio e tal.

[]s

O Jefrey Zeldman (http://www.zeldman.com/) escreveu
um livro sobre essa discussão , e duas vantagens de uso
de CSS.

O livro chama-se “Projetando Web Sites compatíveis”, e gasta
quase 80 páginas explicando as vantagens e desvantagens
do uso de estilos, além de algumas histórias interessantes,
como por exemplo a ESPN.com migrou seu site inteiro
para CSS e economizou com isso 1.2Tb por dia de banda.

Eu acho legal esse site, dá uma explicação bem suscinta a respeito: Why tables for layout is stupid

Eu. Um carinha que fez um curso na FEC/UFF comigo emd ezembro, ele teve que abandonar o curso, mas era sóciod e uma consultoria e prograamdor, já tinha feito o cursod e Java e segundo o Professor Carlos Ribeiro era um excelente programador. Usava um notebook com aqueles programas especiais com áudio e tal.

Ah, o Sergio nem precisa ir tão longe. Na USP mesmo tem um cara cego que faz o mesmo curso que eu (matemática aplicada e computacional).
Eu não tenho a mínima idéia de como ele faz para estudar ou pra programar porque ele não é da minha classe, mas algum jeito ele dá!

Quando eu dava aula pela Oracle Education, já lecionei para um cego.

Ele estava acompanhado de uma outra pessoa que ia passando
as coisas pra ele.

Nossa, mas a memória do cara era fantástica…

Imagine vc… feche os olhos e monte um SELECT com GROUP BY,
JOIN, etc num modelo de tabelas que tb está na sua cabeça… :lol:

Resumindo: o cara era muito inteligente.