Tableless NÃO é o mesmo que Web Standards!

Tableless NÃO é o mesmo que Web Standards!

Entenda o que são padrões web e porque são diferentes de simplesmente usar menos tabelas

Por Leidiane Oliveira | Em 04.05.11 | Categorias: Tecnologia, Web

Caros leitores

Sou nova aqui no blog. Amiga de longa data de nosso querido Arcanjo, recebi o convite para escrever no blog, e com muito prazer, aceitei!

Assim, primeiramente gostaria de apresentar.

Prazer, sou a Leidiane.

Sou formada em Design gráfico, faculdade de artes e comunicação, mas venho da area de TI bem antes da minha formação, que me deram 8 bons (algumas vezes nem tão bons) anos de experiência com web. Trabalho com a criação de layouts e faço até html e css. E nada mais. Passou disso, já sou leiga.

Mas vamos ao que interessa.

Quando comecei a mexer com web, um amigo estava me ensinando a criar sites (exatamente, foi lá na epoca da bolha, antes dela estourar) e me mostrou como se fazia, inserindo tabelas e mais tabelas, uma dentro das outras.

Eu, que tenho lá minha mania de organizaçao e cada coisa em seu lugar, estranhei e questionei se nao tinha outro jeito, porque estava muito baguncado. Na minha cabeça, tabela ja era para fazer tabelas! Mas ele falou que nao tinha jeito: É assim mesmo que todo mundo faz, ele disse.

Ok, me conformei e fui fazendo sites com tabelas e mais tabelas. Até que um dia, veio a geração tableless! Fiquei maravilhada e pensei: Sabia que tinha outro jeito! E comecei a estudar e ja aplicar o conceito Web Standards.

Bom, hoje, depois de muito tempo do surgimento dessa geração, bem depois da bolha estourar e já filtrar vários profissionais da área, vejo ainda muitas pessoas que não conhecem o Web Standards. Somente o tableless, provavelmente por ainda não entender o conceito dos dois.

Entao vamos lá.

Tableless vem do ingles menos tabelas. Table = tabelas, less = menos. É apenas isso. Desenvolver com tableless é apenas desenvolver com menos tabelas.

E Web Standards vem de padrões da web. São como códigos de conduta criados para desenvolvimento na web. Estude estes códigos e entenda para que serve cada tag e regra de padronização.

Sei que muito ja se falou muito disso na web, mas incrivelmente, peguei um trabalho de consultoria recentemente para fazer um pente fino no site, para deixa-lo redondinho no design.

Apos o levantamento inicial, fui fazer as adequações no código e fiquei espantada. Quem fez, não usou tabelas, mas tinha tanto div e span, que o site continuou engessado e bagunçado do mesmo jeito que os antigos feitos em tabelas!

As regras básicas e primordiais são as seguintes:

  1. Procure sempre usar tags específicas para a função.
  2. Separe o código da formatação. Toda formatacao deve ser inserida via folha de estilos (css), NUNCA misturado ao código html.
  3. Nada de tags desnecessárias, pensando em coloca-la apenas para inserir um background a mais. Vença o desafio de descobrir como inserir mais de um background sem inserir tags inúteis e vazias.

Claro que existem muitas outras regras de Web Standards, que competem a outras áreas do desenvolvimento de um site, regras para programação, SEO, e varias outras, mas essas sao as básicas, da estrutura inicial do site, e é onde tenho mais conhecimento.

Desta parte em diante, eu passo para um especialista.

Tags: , , , ,


Desde 2002 trabalho com design de web, focando o design centrado no usuário, com usabilidade e os princípios de webstandards e a acessibilidade em sitios de internet.

« »

2 Comentários

  1. Felipe

    Muito bom o post… Só fico na dúvida de como colocar certos backgrounds sem ter elementos a mais no html…

    Ahh… E no teu blog o title tá errado.
    É “portfólio”, e não “portifólio”… xD

  2. Leidiane Oliveira

    rsrsr. Obrigada Felipe.
    Na verdade, na verdade os dicionarios brasileiros indicam usar porta-fólio. Portfólio é em ingles, que “aportuguesadamente” virou portifólio. Mas de qualquer forma fica mais bonita a sua sugestão, e como meu primeiro “comentarista” vou segui-la :-)

    Obrigada pelo comentário, pela sugestão, e apareça sempre ;-)

Deixe uma resposta

Utilize o formulário abaixo para deixar uma resposta no Arcanjo.org. Os campos marcados com asterisco são obrigatórios.

Você deve estar logado para postar um comentário.