Tableless - Desenvolvimento inteligente com Padrões Web

20/06/2005

HSBC Tableless!

Como alguns já sabem, o site do banco do HSBC virou tableless. Foi a Atípico que treinou a turma de desenvolvedores do site (eu era um dos professores). Pois é. Não tenho certeza, mas acho que é o primeiro banco …

Por

Como alguns já sabem, o site do banco do HSBC virou tableless.
Foi a Atípico que treinou a turma de desenvolvedores do site (eu era um dos professores).

Pois é. Não tenho certeza, mas acho que é o primeiro banco com site que segue os Web Standards. Ótima iniciativa.

Claro, o código não está perfeito (existe código perfeito?), há muitas coisas que podem ser melhoradas, mas sem dúvidas, melhor que a concorrência (mas aí tá fácil).

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.brunotorres.net Bruno Torres

    Hmmm…199 erros…XHTML Intentional (http://blog.outer-court.com/archive/2005-04-15-n10.html) hehehe
    De qualquer maneira, uma bela iniciativa. Sites de banco costumam ser um lixo e esse deve ser mais agradável ou, pelo menos, mais rápido. Como não sou cliente do HSBC., não posso testar.
    Parabéns a vocês da Atípico por estarem ajudando a melhorar a web no Brasil.

  • robson

    Diego, sabe dizer se existe em algum lugar um comparativo em termos de melhoria de performance em servidores que servem páginas com webstandards e não webstandards (no caso de paginas dinamicas, claro) ?

  • Márcia O. Carmo

    Muito legal mesmo, como eu jah havia dito num post anterior..
    Isso é um grande avanço e incentivo para outras empresas =)

    ipi ipi uhaa =D

  • http://www.webroom.com.br Henrique Costa Pereira

    Agências bancárias deveriam adotar webstandards, considerando a quantidade de tráfego pela web. Sobre o HSBC, já é uma boa iniciativa trocar <table> por <div>. Ainda estejam BEM longe de ser "webstandards". Não encontrei nenuhum <h1> nas páginas que naveguei por exemplo. Está longe de validar o XHTML (199 ERROS), nem o CSS (eu fui lá testar) valida! Sobre "código perfeito",dizer que "não existe" é relativo de projeto para projeto.

  • http://MarcoGomes.com MarcoGomes.com

    O conceito de código perfeito pode sim ser atingido.

    Só que não existe uma regra infalível, é decisão humana. Usar definition list ou títulos e parágrafos? Usar big ou somente texto comum formatado via CSS? Isso é título ou não? Tudo é muito de julgamento e este sim, não pode ser feito com regras infalíveis.

  • João

    Desculpe!

    mais vou voltar em um assunto antigo "As Camisetas TABLELESS" investe nisso Diego que é sucesso coloca 3ou4 modelos a venda aqui!

    flww

  • http://tableless.com.br/eyesmiles/ Diego Eis

    Calma João…
    Fiz um modelo só… e vai ficar pronta essa semana.
    Talvez entre quinta e sexta já esteja a venda. :-D

    Espero que vocês gostem.

  • Robson Ortiz

    Pessoal,

    Estaremos implementando as melhorias aqui sugeridas.
    Continuem mandando suas críticas e sugestões.

    É muito bom contar com a participação de vocês!

    Obrigado a Atíco e a todos os que registraram aqui seus comentários.

  • http://www.webroom.com.br Henrique Costa Pereira

    Sugestões para Robson Ortiz:

    O Design está ótimo, não sou cliente do HSBC para saber internamente sobre navegação e etc, mas em resumo o site ficou ótimo.

    Sobre o quesito "webstandards" o site está longe se avaliado por este critério. O fato de substituir a estruturação de um site de <table> para <div> não faz de um site webstandards. Este critério, como divulgado com muita frequencia pelo site Tableless, pode angariar benefícios não visíveis em um primeiro momento.

    As principais vantagens de um código webstandards são:

    1)Redução gigantesca do tráfego: Se você for na seção de "convertidos" do Tableless, você vai ver que a redução pode chegar a 40%. Em uma agência bancária que tem milhares de acessos diários, isso pode significar em ganho de tempo para o usuário e grana para o banco que vai ter que pagar menos por taxa de transferência na hospedagem!

    2) Escrever um código semanticamente correto, é a garantia de um 100% interpretado por mecanismos de busca.

    3) Redução de tags desnecessárias, consequentemente redução no tamanho e no tráfego.

    4) Melhor acessibilidade e compatibilidade com diferentes dispositivos como desktops, pda’s, palm tops etc…

    5) Maior agilidade na matutenção do site: Depois que eu migrei minha maneira de trabalhar do modo antigo para webstandards, tudo é mais fácil, mais rápido, de melhor domínio e mais ágil! Sem dúvida.

  • Márcia O. Carmo

    off-topic:

    Preciso de hacks pro Opera!!!

    Tou postando aqui pq não achei no forum e não achei em lugar nenhum e jah estou em desespero..

    Alguém me ajuda? =~

  • bruno chaves

    pois é marcia, to na mesma pendencia.
    no meu caso eu preciso de um hack q nao seja o
    html>body
    pois preciso diferenciar o opera do ff
    se alguem puder me ajudar tb

  • Xico

    Meio off, mas vale:
    Estava procurando figuras de uma caneca do firefox (sou viciado no browser :D ), e nao sei como entrei aqui!!! Resultado? BookMark nele… Nao conhecia o "movimento" tableless, mas acho valido demais.

    Principalmente pq tenho que lutar para amigos meus adotarem padroes (w3c), e nao fazer sites apenas "para o outro browser".

    Flw

  • http://www.brunotorres.net Bruno Torres

    Hack pro opera:
    @media all and (min-width: 0px){
    #selector {
    margin:0;
    }
    }
    Tirado aqui mesmo do tableless: http://tableless.com.br/convertidos/apple/tableless/

  • Márcia O. Carmo

    oooo bruno… valeu! vou testar agora…

    eu olhei vários convertidos mas acho que não tinha olhado tão bem, pois não achei ele ehhe

    vou testar ;)

  • Márcia O. Carmo

    Mais um coment.. soh pra dizer que funciona..

    Meus problemas com o Opera acabaram! :)

    Tenho uma dúvida com relação a hacks…
    assim a gente não fica amarrado aos browsers existentes hj? Antes, com o javascript era assim.. se netscape, se IE.. aih virava aquela confusão.. com o css não vai ficar assim tb?

  • Djeco

    Mas se usar os hacks o css não vai ser validado pelo w3c não é?

  • Márcia O. Carmo

    Mais um coment.. soh pra dizer que funciona..

    Meus problemas com o Opera acabaram! :)

    Tenho uma dúvida com relação a hacks…
    assim a gente não fica amarrado aos browsers existentes hj? Antes, com o javascript era assim.. se netscape, se IE.. aih virava aquela confusão.. com o css não vai ficar assim tb?

  • Fabio Ribas Cesconetto

    Dei uma olhada no site do HSBC e eles já melhoram bastante o código. Queria que o meu banco fosse assim.

  • Ritch Bittencourt

    Na versão do IE5.0 o site do HSBC carrega uns espaços no inicio da página.
    Alguem sabe porque isto acontece?

  • Djeco

    E os hacks no w3c? valida ou não?

  • Fábio

    Olá,

    uso o Firefox 1.0.4 e quando pedi para visualizar a versão para impressão o site ficou completamente desconfigurado.. imagino que isso seja um detalhe importante.. trata-se desse projeto específico ou o webstandard ainda não consegue resolver o lance de impressão fiel!?

  • Robson Ortiz

    Olá Fabio,

    A idéia é essa mesmo. Na versão de impressão usamos outro CSS, onde retiramos menus, abas, forms de logins de aplicativos e outros.
    O foco neste caso é para o conteúdo (texto) e os elementos passam a ficar um em baixo do outro.

  • Fábio

    Olá Robson,

    isso eu sei :) mas no caso do HSBC tá faltando conteúdo na versão para impressão… pelo menos no teste que fiz da home.

    Abs!

  • http://www.ag2.com.br Rodrigues Comandolli

    Pessoal,
    procurando por quem desenvolveu o redesenho do site do HSBC, acabei parando por aqui.

    Sou gestor da área de Design de Interfaces na AG2 e também cliente do HSBC. Posso relatar que a melhora foi totalmente significativa, esteticamente, funcionalmente e usavelmente. Um layout limpo e rápido. Ainda existem alguns problemas relacionados a navegação (caminho de pão não-clicável, por exemplo), mas ficou realmente muito bom.

    Bela iniciativa.

    Abraços.
    Rodrigues Comandolli.

  • Luiz

    Não concordo, sou cliente do HSBC, e site não está nos padrões da web. O Opera segue os padrões da W3C e site do HSBC por exemplo, não consigo ver nenhum botão para continuar uma operação. Falha grave, fazendo assim o site inoperável