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.
Se ainda estiver interessado, leia também:
Este post foi criado
na Segunda-feira, Setembro 27th, 2004 às 00:00 e está arquivado em Geral.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Ficou mais rapido aqui , seria interessante saber quanto de banda vai ser economizado neste site a partir de agora
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.
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.
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.
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!
Legal hauehuha
Uma coisa: como se faz para orçar um layout? Como por isso numa APF? sei lá!
Ficou muito show, legal mesmo.
Até a div "linguicinha".
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.
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
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!
Não consegui abrir no Firefox!
Apresentou "Timeout".
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.
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.
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.
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.
Muito legal!
Parabéns à toda a equipe! O código bem identado e com nomenclatura contextuada é demais! Legals mesmo!
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.
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.
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.
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.
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.
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…
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