Tableless - Desenvolvimento inteligente com Padrões Web

27/09/2004
Geral

Terra.com.br tableless

Terra.com.br. Tableless. Passou a funcionar bem no meu Firefox. Redução de mais de 35% do tamanho do download original. Poucas escorregadas no código, mas nada grave considerando a complexidade que é trabalhar em um portal desse tamanho. Estou orgulhoso dos …

Por

Terra.com.br. Tableless. Passou a funcionar bem no meu Firefox. Redução de mais de 35% do tamanho do download original. Poucas escorregadas no código, mas nada grave considerando a complexidade que é trabalhar em um portal desse tamanho. Estou orgulhoso dos meus alunos.

Update por Diego: Está muito bom mesmo. E por curiosidade, os dados abaixo são interessantes:

Antiga Tableless
Tamanho total 81 Kb 48 Kb
Tamanho do HTML 10 Kb 8 Kb
Em conexão de 56Kb 16.20 Segundos 9.84 Segundos
Imagens 44 Kb 23 Kb

Com certeza, fazendo com tableless, o Terra ganhou em velocidade e economia de banda. As imagens diminuiram bastante, não há mais aqueles gifs de 1px para dar espaçamentos. E com certeza, esperar 7 segundos a menos se estivermos conectando de um modem, é um alívio. Parabéns a equipe do Terra e a equipe da Visie por treiná-los.

Por Elcio Ferreira

http://elcio.com.br/

Veja os outros posts de

  • tsbega

    Ficou mais rapido aqui , seria interessante saber quanto de banda vai ser economizado neste site a partir de agora

  • http://www.marcelolinhares.com Marcelo Linhares

    Muito interessante…
    ficou rapidão aqui tbém…!!!
    To achando que eu preciso de fazer o curso..rs

    Poderiam ter salvo a versão anterior, para compará-lo com a versão atual e colocá-lo na seção "convertidos" desta página.

  • http://www.plasmadesign.com.br Sérgio Jardim

    Bem que eu vi hoje que o trem tava rapidaço mesmo. Mas nem lembrei de olhar no código. :) Que bom que fizeram isso. O IG é que deu pra trás quando mudou o layout todo. Ruim em design e código. Só recentemente ficou compatível com o Firefox, depois que a galera meteu o pau.

    Agora que o Terra mudou, vamos ver se os outros vêm atrás.

  • http://www.robsonbarros.ppg.br Robson Barros

    Estava estranhando a rapidez mas não tinha me atentado para conferir o código. Quanto entro aqui..tum…a resposta… legal. Mandaram bem mesmo.

  • http://rodrigomuniz.blogspot.com Rodrigo Muniz

    Muito foda meu! Aquela lista lá gigante de links é um tesão pra qem curte tableless, finalmente um portal com moral, só podia ser eles mesmos!

  • Thiago

    Legal hauehuha :)
    Uma coisa: como se faz para orçar um layout? Como por isso numa APF? sei lá!

  • Mauricio

    Ficou muito show, legal mesmo.
    Até a div "linguicinha". :)

  • Vagner Lima

    Essa da div "linguicinha" foi a melhor que já vi, hehehehe

    Parabêns a equipe do terra pelo ótimo trabalho e para a equipe quem os treinou.

  • Celso

    Obrigado Elcio.
    No decorrer da semana vou melhorar ainda mais o código, tive de colocar meio na correria, mas se tah bom, vai ficar ainda melhor.

    [ ]‘s

  • http://dotcafe.blogspot.com Murilo Corrêa

    Já tinha acessado o Terra e percebi que a renderização estava diferente e bem mais rápida. Só não olhei o código-fonte porque nunca passou pela minha cabeça que os caras iriam fazer a reestruturação da home do portal em formato tableless.
    Parabéns aos envolvidos nesse grande feito!

  • http://dudu.nopeter.com dudu

    porque não tem doctype ?

  • Leandro Ferrari

    Não consegui abrir no Firefox!
    Apresentou "Timeout".

  • http://www.tatanka.com.br/blog Sergio Lopes

    Se alguem aqui do Tableless.com.br tiver contato com a equipe do Terra, gostaria que enviasse os meus parabens e o de muita gente que está comentando por todo lugar. No nosso meio só se fala nisso e da importancia que tem a entrada de alguem de peso na nossa luta por uma Web melhor. Mesmo nao sendo assinante/leitor do Terra, só tenho o que agradecer pelo que fizeram pela Web brasileira.
    Bem diferente do trabalho porco e absurdo que o iG faz, por exemplo, o maior desfavor ao WebDesign que já vi. Novamente, meus parabens e meu muito obrigado.

  • Daniel Bertini

    Milagre.
    Trabalhei um tempo no Terra e tentei um belo dia otimizar o código porco Html deles. Na época utilizavam o Vignete. Os porcos da espanha não autorizaram a mudança mesmo com os dados de melhoria de performance na mão. Motivo alegado? Vai ter de manter o código que foi enviado pelos espanhois.
    De qualquer maneira parabéns à equipe e um abraço ao Sena se ainda estiver no Terra.

  • Luis

    Amigos, gostaria de saber se alguem pode me dizer se aqueles "popups" que aparecem no meio da tela quando abre o terra é java? ou o que for, e se alguem pode me ajudar dizendo onde tem um exemplo daquilo. grato.

  • Bruno Torres

    O código está quase válido. Se forçar o doctype para html 4.01 transitional e o charset pra iso-8859-1 ele valida. Para validar como xhtml 1.0 transitional so falta fechar uma das meta tags, além de declarar o doctype e o charset, claro.

  • Marcus

    Muito legal!
    Parabéns à toda a equipe! O código bem identado e com nomenclatura contextuada é demais! Legals mesmo!

  • http://www.indique.com.br WALTERSON

    Gostei do site

  • http://www.fimdeprova.com Daniel Santana

    Fala galera Tableless…

    Estou meio afastado do site ultimamente, bom saber que seus alunos fizeram um bom trabalho. Parabéns a vocês e a eles também.

  • Carlos Fatureto

    Esse ganho de velocidade foi totalmente por conta da diminuição das imagens e não por causa do tableless.
    Temos que acabar com essa história de que tableless deixa o site mais rápido, pois na verdade NÃO deixa.

    Apesar de saber que tableless não deixa o site mais rápido sou a favor de adotá-lo por questões semânticas e por achar mais fácil a manutenção. O tableless possui muitas qualidades, não precisam ficar inventando que deixa a página mais rápida.

  • http://elcio.locaweb.com.br Elcio

    Carlos, você tem razão, a maior parte do ganho vem da redução nas imagens. Mas essa redução é proporcionada pelo trabalho com padrões. Note, trabalhando com padrões você elimina slices em troca de imagens maiores, que podem ser melhor otimizadas, e em graaande quantidade. Elimina spacer.gif, imagens de linhas decorativas e etc.
    Ou seja, é o trabalho com padrões que permite essa redução no peso das imagens.

  • http://www.1grau.com Carlos Fatureto

    Caro Élcio,
    Você tem razão que a maioria das imagens que foram inutilizadas são space.gif que possuem 1px e pesam 1/3 de KB, mas usadas em muita quantidade podem fazer a diferença.
    O que eu discordo é a necessidade de usar tableless para não usar essas imagens. Quase todos meus sites são híbridos (ainda não tenho conhecimento para fazer só em tableless) e em nenhum eu uso esse tipo de imagens, basta setar um style na table e colocar margin ou padding de 1px.
    Resumindo, a eliminação das imagens é por causa do bom-senso de quem fez o novo layout e não por causa do tableless em si.

  • http://elcio.locaweb.com.br Elcio

    Certíssimo Carlos.
    Ou seja, seus sites são leves porque você trabalha com padrões web, embora ainda não faça layouts tableless. Pra você também são os padrões que estão ajudando a reduzir o peso.
    O que você chama de "bom senso" é algo impossível de se obter sem conhecer css. Como alguém pode trocar o spacer.gif por margin ou uma imagem fatiada por um background largo sem conhecer css? Claro, o css não faz o trabalho, precisa de bom senso. Mas ele é a ferramenta que você e o pessoal do Terra estão usando para aplicar seu bom senso.

  • http://www.mercadoshop.com.br/ Everton Figueiredo

    Logo que acessei já vi a diferença, muito mais rápido, já tava na hora do pessoal do Terra mudar para Tableless, parabéns para eles…

  • Roberto Vieira

    Olá Elcio,

    Ontem no evento queria tirar uma dúvida com você, embora não conheça muito de tableless, estou tentando fazer a intranet da empresa para aprender. A minha dúvida é, tenho uma imagem do topo que ficou grande cerca de 20kb, então decidi fatiar, pra ficar picado esse valor e abrir aos poucos.
    A minha dúvida é, como eu faço pra organizar essas imagens fatiadas pra ficarem em uma só em div, pois em table> seria fácil e rápido, mas em div a única forma que encontrei foi usar div dentro de div e mudar o background-position das imagens.

    Só que eu fatiei em 13 pedaços e ai ficou 13 divs só pra essa imagem.

    Se puder me ajudar eu agradeço

    Abs