João Henrique Firmino Segunda-feira, 12 de dezembro de 2005

Tableless

Tableless nada mais é do que uma metodologia de desenvolvimento de layouts sem o uso de tabelas, da qual toda a informação é separada da formatação, levando em conta a semântica do (X)HTML. Toda a formatação do layout é feito pelo CSS, tornando vantajoso a estruturação de um layout fazendo com que seu site se torne muito mais leve para acessar.

É extremamente necessário estar dentro de todos os padrões web da W3C ( World Wide Web Consortium ), e possuir um bom conhecimento em HTML/XHTML/CSS para que se possa entender e aprender toda esta metodologia de desenvolver estruturas que são mais leves que um pena.

Algumas Vantagens

- Desenvolver um site que seja melhor visualizado em qualquer navegador do mercado.
- Criar um site sem tabelas e o mais independente possível de tags, podendo até fazer uma estrutura até 70% mais leve que o tradicional.

Construir sites em tableless é mais do que fazer homes mais leves e viáveis, e sim estar também em dia com os padrões web da W3C e também com seu auto-conhecimento nesta gisgantesca e vasta selva do mundo virtual.

Para saber mais sobre os padrões web e aprenderem melhor todo o conteúdo citado neste artigo acessem www.w3schools.com , lá vocês encontrarão além de uma vasta aprendizagem, também verão quizes para testar e avaliar seu conhecimentos. Uma ótima dica também é conhecerem melhor o CSS explorando todo o conteúdo do Imasters e através dos artigos de Mauricio Samy.

E para entenderem um pouco mais sobre esta metodologia, acessem também www.tableless.com.br.

Espero que tenham gostado e se interessados pelo conteúdo, pois é algo essencial hoje no mercado web para se aplicar no desenvolvimento web. Agora mostrarei a vocês uma introdução básica de estruturamento em tableless.

Construindo um layout básico

Vamos adentrar a partir de agora no básico do conhecimento em desenvolvimento tableless. É muito importante que você já saiba o necessário de (X)HTML e CSS. Segue abaixo uma estrutura básica:

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estrutura Básica de 3 colunas</title>

<h1>Estrutura básica</h1>
<div id="esquerda"> conteudo esquerdo </div>
<div id="direita"> conteudo direito </div>
<div id="conteudo"> conteudo do meio </div>
</div>

</body>
</html>

Como vocês podem ver, toda a estrutura fisica no XHTML é orientada pela tag <DIV>, da qual a mesma chama as propriedades do CSS para imprimir na tela todo o layout. É importante chamar o arquivo css após sua criação, da qual podemos fazer isso de 2 maneiras:

Vamos ver agora um exemplo deste arquivo CSS, que está sendo responsável pela forma do layout acima:

site.css

h1 {
text-align:center; }

#corpo {
width:700px; text-align:justify; font:70% Arial; }

#direita {
width:120px; float:right; }

#esquerda {
width:120px; float:left; }

#conteudo {
width:400px; margin-left:150px; }

Para quem já conhece o CSS, podemos reparar que o ‘#’ antes do nome da propriedade serve nada mais do que para identificar que será usado pelo ‘ID’ da tag <DIV>, com a finalidade (é claro) de estruturar conforme os comandos usados pela propriedade.

Fácil e prático, toda a estrutura no tableless será feita por inteira no CSS e depois chamada no XHTML para a sua impressão final. Basicamente é isso pessoal. Para visualizarem melhor, clique aqui para baixar o arquivo index e o css para melhor análise ok.

Obrigado a todos, e em breve darei continuidade no desenvolvimento em tableless.