Tableless - Desenvolvimento inteligente com Padrões Web

01/02/2005
Artigos

KISS!

Calma, não é comercial de alguma banda de rock ou rede de relacionamento. Trata-se de um acrônimo: Keep It Simple, Stupid. Um grande número de problemas que os iniciantes enfrentam são por causa da complexidade do código. Muitas vezes os …

Por

Calma, não é comercial de alguma banda de rock ou rede de relacionamento. Trata-se de um acrônimo: Keep It Simple, Stupid.

Um grande número de problemas que os iniciantes enfrentam são por causa da complexidade do código. Muitas vezes os div´s aninhados substituem as tabelas aninhadas, fazendo o sentindo de se implementar com Padrões Web se perder.

Deixar o mais simples possível.
Praticar a simplicidade não é fácil… Parece simples, mas não é. Precisa de muito esforço, planejamento e um bocado de experiência (que só se consegue praticando).

Um jeito fácil de se conseguir à simplicidade sem muito esforço é prestar muita atenção na Semântica dá página.
Por exemplo: para fazer um parágrafo, você precisará de apenas uma tag (<p>), e não de dois div´s.
Para fazer uma coluna simples, você precisará de apenas uma tag <div>, e nada mais…

Quando você estiver implementando um site, e perceber que o código está complicado, difícil de ler, comece de novo, provavelmente você está fazendo alguma coisa de errado.

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://villasweb.com Edu

    Hoje ainda é dia 01/02/2005.

  • http://taghead.blogspot.com Alexandre Gomes Gaigalas

    Uma das coisas que ando vendo ultimamente é exatamente isso, muitos usuários fazem o site em tableless, mas com o XHTML muito porco, não se preocupam com a semântica da página…

  • Daniel

    como funciona esse tag <dig>???

    obrigado!

  • Jonatas Moisés Sas Lacerda

    Eu sou uma prova viva disso! Estou fazendo meu primeiro site Tableless e acho que compliquei todo o CSS, heheheh, deixei cheio de elementos inúteis, etc.. No XHTML estou tentando, pouco a pouco, neste site mesmo, remover as tags inúteis que são herança dos sites com tabelas.

    Acho que quem tá comessando, tem o direito de fazer essas coisas, pq é muito difícil largar as tabelas e ir para o tableless, pq estamos muito acostumados a elas. E como o Diego mesmo disse, é praticando que se aprende.

    Se o Internet Explorer não fosse tão ruim, eu teria tido menos da metade do trabalho que eu já tive. Pq eu fiz tudo olhando só no Firefox e depois fui olhar no Netscape e no Opera, teve e tem um probleminha no Opera, mas nada demais, no Netscape ficou identico, mas no IE nada tinha sentido. Digo isso pq quando nós, iniciantes, damos de cara com um site que não funciona, comessamos a fazer de um tudo para que ele funcione, ainda mais no IE que as pessoas mais usam, mas em contrapartida seu código (pelo menos no meu caso) vai ficando um lixo.

    Eu vou tentar melhorar o código, mas por enquanto ainda não rola… hehehe

    Deem uma olhada: http://www.inic.com.br/default1.asp

    []‘s

    Jonatas

    PS.: Acho muito importante esse tipo de discussão.

  • http://taghead.blogspot.com Alexandre Gomes Gaigalas

    Não existe tag <dig>, foi um erro de digitação do editor, é <div> na verdade.

    Mas, dependendo da coluna, não dá pra usar só um <div>… por exemplo se eu quiser dois backgrounds (um no topo, e um no rodapé da coluna), tenho que colocar dois div’s encadeados, cada um com seu background devidamente posicionado. Em breve isso será resolvido quando todos os browsers aceitarem o atributo "content" e as pseudo-classes ":before" e ":after".

    OBS: Já chehuei a fazer 9 div’s para criar uma caixa redimensionável em todos os sentidos :\

  • http://www.meucarronovo.com.br Genau

    Alexandre,

    O conceito de simplicidade, se aplica exatamente a isso.
    Pra que criar 9 divs diferentes se pode-se simplificar o código?

    Seria realmente necessário criar um layout tão "engessado" a ponto de ser necessária a implementação de 9 div´s diferentes apenas para criar <espanto>apenas uma</espanto> caixa redimensionável ?

    É aí que o post faz sentido…

    Keep it simple!!!

  • Bruno

    Pois é, acho que hoje estamos tão apegados às tabelas, pois foi a primeira forma de conseguir organizar o conteúdo de uma página de maneira adequada. Acho que até os ‘padronizadores’ de código se acomodaram, até agora. Ainda bem!
    Eu gostei e tenho adotado o conçeito tablelles, primeiro eu monto a página, com o CSS ativo, depois tiro o CSS e, se ficou legível, continuo, senão recomeço a estrutura denovo…

    por Bruno, o Kühnen.

  • Jonatas Lacerda

    Já que estamos falando de simplicidade e se tocou no assunto ‘caixa redimensionável’ e dois ou mais backgrounds em um único elemento, pergunto, há uma forma de se colocar mais de um backgound em um elemento?

    []‘s

    Jonatas

  • Valentín Moreira

    Só da para convinar um background-image e um background-color no mesmo elemento.

    Eu tento tirar o "código merda" aproveitando os selectores de filhos ou descendentes do CSS. Da para ter uma compatibilidade com Internet Explorer 4.

    Nao da para facer muito mais por encuanto (para mim que tento a maior compatibilidade backward com CSS avançados).

  • http://www.glacial.cjb.net/ Glacial

    Kakakaka! Gostei do trocadilho .. :)

  • http://ruf.rockgrafia.com Fellipe Cicconi

    Veio bem a calhar essa dica.

    Vcs já falaram sobre DOM aqui? Acho q seria legal esse assunto pro futuro.

  • http://taghead.blogspot.com Alexandre Gomes Gaigalas

    Genau, a idéia e o método de caixa redimensionável (quando digo redimensionável digo que tem tamanho relativo ao conteúdo) eu tirei do "A List Apart" e dei uma turbinada, para redimensionar não só verticalmente mas horizontalmente também!

    Você define uma única caixa e pode usá-la no site inteiro, não importa a altura ou largura do conteúdo.

    Mas 9 div’s por que? Simples:

    top, left, bottom, right, corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right, background.

    Bruno, se você aprender XHTML semântico não precisará re-escrever seu código várias vezes… o conteúdo sempre ficará legível

    Jonatas, o único modo cross-browser de colocar dois backgrounds em um único conteúdo é usando mais de um div nele.

  • http://www.meucarronovo.com.br Genau

    Alexandre,

    Vou me expressar melhor.

    Quando eu me referi às caixas "redimensionáveis", quis dizer que não seria necessário 2 backgrounds em divs diferentes, se o layout, no momento da concepção for idealizado "pensando na filosofia Tableless" – Entende? -

    O ue quero dizer. é que muito trabalho inútil e energia mal gasta pode ser evitada, criando uma interface não menos bonita e funcional, já imaginando como ela será aplicada no xhtml/css

    Por exemplo:

    Caso queira criar 3 backgrounds diferentes para uma mesma página, e você tem o controle do conteúdo a que ela estará aplicada, poderá usar o conceito de "faux columns" amplamente difundido no meio.

    Abraço,

  • http://www.echoes4ever.com Jonathas Scott

    KISS para todos nós…

  • http://www.bandamalkavianos.flogbrasil.com.br Caio Mancini

    como o colega disse, o atributo "content" é mto útil e as pseudo-classes :before e :after também.
    gostaria de vê-las sendo tratadas mais aqui, bem como as outras pseudo-classes

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

    Outro dia eu descobri um recurso no dreamweaver que faz EXATAMENTE isto, converte tabelas em camadas…

    Comando: Modificar -> Converter -> Tabelas em Camadas…

    estão curiosos para ver como fica o código da página???
    http://www.asabh.org.br/

    E aí????
    Que vantagem maria leva????

    hahahahaha

    Diego, foi muito bom ter tocado neste assunto, tableless virou moda e muitas pessoas não estavam sabendo nem da metade da história.

  • http://www.meucarronovo.com.br Genau

    Marcelo,

    Sim, o Dreamweaver transforma layers em camadas, mas pra sua decepção , não faz nem 10% do que um código semântico e estruturado necessita pra ser chamado de um bom XHTML.

    A Maria, leva vantagem em aprender a semântica, com um CSS mais limpo e separado do HTML, diferente do que o dreamweaver tenta com propriedade, mas não faz.

    A outra metade da história, Marcelo, você tem que APRENDER fazendo.

    um abraço,

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

    Genau,
    parece que você não entendeu a ironia do meu argumento…
    mas deixa pra lá…
    hahaha

  • http://www.meucarronovo.com.br Genau

    Opa Marcelo,

    Desculpe,

    se vo^ce tivesse usado as tags de XHTML eu teria entendido…

    <ironia> </ironia>

    hahahahaha

    Abração…

  • http://taghead.blogspot.com Alexandre Gomes Gaigalas

    Essa conversão de tabelas do dreamweaver é igual ao CSS que o photosho gera… é bem limitado! mas já é um começo…

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

    "Essa conversão de tabelas do dreamweaver é igual ao CSS que o photosho gera… "

    Opa..
    esta eu não sabia…(a partir de qual versão tem esta opção?)

    mas provavelmente deve ser uma <ironia>mer***</ironia> igual ao do Dreamweaver…

  • Caio Mancini

    pelo menos na versão 7 pra cima o PHotoshop gera CSS qdo se usa o recurso de "fatiar" imagens.
    eu nunca testei nem o CSS do Dreamweaver ou do Photoshop ou de <palavrão>lçfakjfç</palavrão> nenhuma. O que me interessa é treinar estudar o usso do CSS junto com o XHTML e outras linguagens para criar sites mais usáveis, belos, dinâmicos e realmente úteis.
    Afinal não é este o intuito deste blog/forum?

  • Jonatas Lacerda

    Olha onde o papo KISS foi parar! Exatamente nos mais anti-KISS que existem, Dreamweaver e Photoshop (que nem pra tabelas fazem o serviço bem feito) <risos />!!!

    Mas agora fica a pergunta que não quer calar, qual é a fórmula de KISS???? Como, com a falta de senso dos desenvolvedores de Browsers como o IE podemos manter a coisa simples???? Putz, eu tô quebrando a cabeça com coisas como a <palavrao>mer****</palavrao> do background pro próprio CSS que não dá pra colocar duas imagens e alinhar, no site que estou fazendo fiz uma coisa linda de se ver, tanto que vou mudar, mas vou ter que aninhar, pq preciso dos backgrounds…..

    Genao, vc pode falar mais do "faux columns"?

    E uma dúvida que tenho, é válido e/ou usar uma ‘expression’ para correção de erros no IE?????????????????

    []‘s pra todos

    Jonatas

  • http://www.meucarronovo.com.br Genau

    Jonatas, primeiramente discordo em voê falar que o Photoshop e o Dreamweaver são "anti kiss", mesmo por que, quem faz o site ser simples ou não, é o próprio desenvolvedor. Principamente se feito em XHTML, pois não importa o software que seja utilizado, e sim a forma em que é desenvolvido.
    <propaganda>Eu mesmo utilizo o Dreamweaver e o Photoshop para desenvolver sites e garanto a vocÊ que não faz nenhuma diferença no ponto de vista funcional, utilizá-los.</propaganda>

    Quanto ao Faux Columns, pode-se encontrar muita coisa na internet a respeito.

    Indico aqui 2 artigos:
    O primeiro é o conceito de Faux Columns muito bem desenvolvido pelos caras do A lis Apart: http://www.alistapart.com/articles/fauxcolumns/

    O segundo é a aplicação de Faux Columns dentro do Conceito de <sic>Div´s Dimensionáveis</sic> http://www.alistapart.com/articles/negativemargins/

    Vale à pena dar uma olhada…

    Um abração.

  • http://www.meucarronovo.com.br Genau

    Quanto aos "Erros do IE", o que acontece é o seguinte:

    Na verdade, o IE interpreta de forma diferente a forma de ler o box de uma div.

    O IE, que não respeita os padrões em que todos os navegadores interpretam margins, paddings, borders e widhts, SOMA os Pixels referentes a estas propriedades às dimensões da DIV, resultando uma verdadeira salada crossbrowser.

    É por essa razão que são usadas, formas de evitar qu eo IE interprete de forma errônea estas propriedades, usando os chamados CSS HACKS (é esse o termo).

  • Jonatas Moisés Sas Lacerda

    Genau, acho que me expressei mal quanto ao Dreamweaver e ao Photoshop….. Eu tbm uso os dois programas, mas evito de usar a maioria das funcionalidades deles para web. Por exemplo, eu tive muitos problemas com a sugeira que o dreamweaver faz no código, coisas como <strong></strong> ou <p><em>lalalaal<em><em> akjsjk </em></p>, neste ponto eu considero o Dreamweaver anti-KISS, gosto de muitas de suas funcionalidades, que agilizam grande parte do processo, mas não deixo que ele me substitua na arte de escrever o XHTML.
    Hoje não uso muito o Photoshop, estou usando o Fireworks e mando apenas as imagens fatiadas, sem html, esse eu faço na mão com o maior prazer… Com o photoshop eu tinha que limpar muita coisa na mão, mesmo com tabelas…

    Bom, resumindo, não sou contra os softwares, mas acho que não há nada que substitua o desenvolvedor, ainda mais quando estamos lidando com tableless…

    Depois vou ver os links, valeu

    []‘s

    Jonatas

  • http://www.meucarronovo.com.br Genau

    Jonatas, você pode sim usar o Dreamweaver pra criar um XHTML bem limpo.

    A macromedia pensou muito bem nesses seus problemas e você pode configurar seu dreamweaver para criar XHTML valido (mas nao pelo W3C), porém correto.

    Para tanto, vá em edit >> preferences >> e no item edit options, selecione o item "use <strong> <em> instead <b> and <i>"

    Fora isso, tem mais uma dezena de confugurações que você pode fazer pra deixar seu dreamweaver afinadinho com o XHTML, como itens de acessibilidade e Validação em tempo real.

    <ironia>Seria bom voce ler um pouco do tutorial do Dreamweaver e usá-lo mais pra tirar essa má impressão que voce tem dele </ironia>

    Hhahaha

    Abraço.

    QQ coisa, pode me mandar um email que eu te passo mais umas dicas..

  • Daniel Maciel

    Só uma coisa… se você NÂO SABE usar o dreamweaver… o problema é SEU… não da macromedia….

    se você gosta de escrever o seu código na mão tudo bem… mas isso não faz as pessoas que gostam de usar bem os softwares piores que vocÊ…

  • Jonatas Lacerda

    Valeu pela dica Genau…

    Daniel, a questão aqui é outra, não disse que ninguém é pior ou melhor que ninguém, quem está dizendo isso é vc, eu não protejo software, ainda mais software proprietário, achei descabida sua declaração, que passa meus comentários de relação profissional a relação pessoal, cada um programa da maneira que bem entende, eu apenas disse o que eu achava do software, garanto que a própria Macromedia não ligaria pro que eu falei, então não entendo pq vc se sentiu….

    Garanto que minha intenção é falar do software e não do programador.

    []‘s

    Jonatas

  • Daniel

    não senti nada cara…

    eu não disse isso diretamente pra vc… disse para todos que acerditam que quem usa dreamweaver é uma pior pessoa e come criancinhas… Se você não é uma dessas pessoas desculpe, você não merecia ler o que eu escrevi… desculpas também aos outros que também não precisavam… talvez tenha sido a hora errada e o assunto errado pra eu falar isso mesmo.. desculpem.. abraços!

  • http://www.bankaterror.rg3.net Erick

    Nossa, isso realmente fala tudo mesmo!!! Comecei a algumas semanas, mas vi que uma coisa que poupa um tempão é utlilizar <ul> e <li> que para fazer uma menu ou uma lista de links, é só fazer o que diz aí em sima "Siga a semantica" apanhei muito mas eu consegui fazer alguma coisa, meu primeiro convertido foi meu blog kkkkk entrem para conferir, ele só não está sendo validado pelo W3C por causa do contador, mas o resto tá tudo OK e validado!!!!

  • http://www.virtualdreams.com.br Roberto Sonnino

    Erick, uma dica:

    Para fazer seu site validar, basta alterar o atributo ‘TAGET’ para ‘TARGET’ no button do tableless e substituir os ‘&’ por ‘&amp;’ no script do contador, e tudo se resolve!

  • http://www.diandra.zip.net Diandra

    eu gostaria de saber como faço para centralizar o layout do blog..a imagem de cima, eu consigo, já o fundo que a parte de baixo do layout eu não consigo…onde fica o perfil e o post…como por exemplo eu fiz aqui http://diandrateste.zip.net/index.html
    eu faço só duas imagens, a de cima e a de baixo, ….estou
    tentando fazer ela por 800 e 600, e fiz por 800 e 600…mas como a configuração do meu video é de 1024, olhem http://diandra.zip.net/index.html ,sempre sobra o canto direito sem nada…por que quando eu fiz o layout por 1024 aí para mim ficou beleza, mas para quem tem o video configurado por 800…quando maxizizava a janela o texto saia fora do alinhamento do layout.
    minha amiga
    me disse que no dela que é 800 por 600, quando se maximiza a janela o texto não
    sai fora do alinhamento do layout…..ela sabe centralizar bem
    certinho, como nesse blog que ela fez. http://perolasdavida.zip.net/ dá
    uma olhadinha, a gente minimiza e maximiza e ele continua centralizado, Tenho dreamweaver..mas não sei como fazer para a imagem do fundo virar tabela para mim poder centralizar então….
    Se alguem puder me ajudar meu email é diandradaks@hotmail.com

    TElefone 54 331 5128 – celular 54 99919831

  • João Paulo Fechine

    Muito fraco esse post!

    :(

    Acredito que um pouco mais de dedicação seria interessante para a criação de posts neste site.

    Nada contra o “colunista”, mas eu me irritei ao ler esse conteúdo tão pobre.