Após muitos anos de desenvolvimento web, a internet precisou passar por algumas mudanças, eu diria que a mais importante delas foi o chamado conceito tableless (ver Box 1). Mas por que eu a considero a mais importante? Simples! Com ela foi possível chegarmos ao nível que estamos hoje, com sites responsivos (ver Box 2), sites móveis e a enorme quantidade de novas tecnologias que surgem em tempo recorde.

Box 1. Tableless:Um site tableless é aquele que não utiliza tabelas para a estruturação do Layout. É um site que segue os Padrões Web. O termo “tableless” é usado mais comumente aqui no Brasil. Em outros países, outros foram mais difundidos, por exemplo: CSS Layouts.

Box 2. Site Responsivo:Um site responsivo é aquele que, independente do dispositivo que o usuário esteja acessando, seja ele móvel ou não, o site automaticamente se organizará para que a melhor experiência de uso seja proporcionada ao usuário.

Diferentes tipos de padronização

  • WebDesign e Aplicações: são padrões para o desenvolvimento de páginas Web, incluindo HTML5, CSS, SVG, Ajax e outras tecnologias para Aplicações Web (“WebApps”). Esta seção inclui também informações sobre como tornar páginas acessíveis para deficientes (WCAG), internacionalização e ainda para dispositivos móveis.
  • Arquitetura Web: é objetivada nos princípios e tecnologias originários e que sustentam a Web, incluso URI e HTTP.
  • Web Semântica: Progredindo a conhecida “Web de documentos”, o W3C ajuda no desenvolvimento de tecnologias que darão suporte à “Web dos dados”, permitindo pesquisas como num banco de dados. O objetivo final da Web de dados é permitir que computadores realizem atividades mais úteis e que o desenvolvimento de sistemas possa oferecer suporte a interações na rede. O termo “Web Semântica” está ligado à visão do W3C da Web dos Dados Linkados. A Web Semântica permite às pessoas a capacidade de criar repositórios de dados na Web, instituírem vocabulários e escreverem regras para interoperarem com esses dados. A linkagem de dados é possível por meio de tecnologias como RDF, SPARQL, OWL, SKOS.
  • Tecnologia XML: incluem XML, XQuery, XML Schema, XSLT, XSL-FO, Efficient XML Interchange (EXI) e outros padrões relacionados.
  • Web Services: referem-se aos projetos de comunicações na Web entre aplicações e estão vinculados a tecnologias como HTTP, XML, SOAP, WSDL, SPARQL, e outras.
  • Web de Dispositivos: Um dos focos do W3C é desenhar tecnologias que possibilitem o acesso à Web por todos, de qualquer lugar, a qualquer tempo e usando qualquer dispositivo. Pressupondo assim o acesso a partir de aparelhos celulares ou outros dispositivos móveis, além de demais aparelhos eletrônicos, impressoras, televisões interativas e até de automóveis.

Navegadores e Ferramentas de Autoria

Utilidade da web e crescimento depende de sua universalidade. Devemos ser capazes de publicar independentemente do software que usarmos ou o computador que temos, a língua que falamos, se estamos com ou sem fio, independentemente dos nossos modos sensoriais ou interação. Devemos ser capazes de acessar a web a partir de qualquer tipo de hardware que pode se conectar a Internet - fixo ou móvel, pequeno ou grande. O W3C facilita essa interação, pois está ouvindo e misturando via web standards internacionais e essas normas garantem que todo o brilho louco continue a melhorar uma web que é aberta para todos nós.

Nesse artigo iremos ver como criar um layout de duas colunas seguindo esse padrão tableless criado pelo W3C.

Nota: Utilizaremos cores no fundo das div’s apenas para aprendizado e visualização dos blocos de conteúdo do layout. Caso as cores não te agradem, é só modificar na propriedade background.

Seção Prática

Chega de um monte de conceitos e definições, o que queremos aprender de verdade é a desenvolver o site não é mesmo? Queremos é ver códigos, então, vamos começar.

Iniciaremos criando um documento em branco, podendo ser no bloco de notas ou em qualquer outro editor HTML, nesse caso, vamos utilizar o Adobe Dreamweaver CS5, como mostra a Figura 1, mas fique à vontade de utilizar o que for melhor para cada um.

Figura 1. Adobe Dreamweaver CS5.

Nota: È comum encontrar pessoas que deixaram de usar o Dreamweaver, devido a quantidade de códigos desnecessários que ele gera, como o doctype (ver Box 3), etc. Particularmente, gosto de utilizá-lo no modo code, mas, caso queiram conferir outra IDE, eu sugiro o Notepad++ e o Sublime Text2, ambos com links de download na seção de Links no final desse artigo.

Box 3. DOCTYPE:A declaração Doctype é a primeira coisa que deve ser acrescentada ao código de seu documento, antes da tag. Ela é responsável por dizer ao navegador qual é a especificação do HTML ou XTML (baseado nos padrões do W3C).

Ao abrir o documento o código que deverá aparecer é o mesmo que é mostrado na Listagem 1.

Listagem 1. Código HTML ao abrir o documento

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Criando um layout de duas colunas tableless</title>
     </head>
    
     <body>
     </body>
   </html>

Por questões de padronização iremos salvar esse arquivo com o nome de index.html.

Nota: Alguns servidores utilizam como padrão arquivos com nome de default e/ou index, dessa forma os desenvolvedores procuram manter o mesmo padrão dos servidores.

Além do documento HTML, para a criação da nossa página, vamos precisar criar um documento CSS, pois é com esse arquivo que iremos estilizar a nossa página.

O padrão tableless nada mais é do que utilizar a folha de estilos CSS para posicionar os elementos HTML na página, estruturando assim o layout.

Na Figura 2 veremos como criar um documento CSS no Adobe Dreamweaver.

Figura 2. Criando documento CSS.

Nosso arquivo .css ficará em branco por enquanto. Primeiramente, iremos salvar ele com o nome de estilos.css, mas você pode salvar com o nome que quiser.

Iniciemos a montagem da nossa página: a primeira coisa a fazer é linkar o nosso arquivo CSS à nossa página HTML, para isso, precisamos digitar o seguinte código dentro da tag <head>, como mostra a Listagem 2.

Listagem 2. Linkando arquivo CSS

<link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />

Com essa ação, nossos dois arquivos estarão linkados e poderemos começar a desenvolver nossa página.

Iniciaremos pelas div´s que vamos utilizar, primeiramente criamos uma geral, para definirmos o tamanho em que o site irá ocupar na tela, chamaremos ela de “site”(Listagem 3).

Listagem 3. Criando a primeira div

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title> Criando um layout de duas colunas tableless </title>
       <link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />
    
     </head>
    
     <body>
       <div id="site">
    
       </div>
     </body>
   </html>

Essa primeira div será a que vamos usar como uma div geral, para delimitar o espaço que o site vai ocupar na página de fato.

Após isso, no nosso arquivo estilos.css iremos estilizar esse div que acabamos de criar, na Listagem 4 vamos aplicar os primeiros estilos de nossa página, é nela que vamos começar a dar forma para nosso layout.

Listagem 4. Colocando os primeiros códigos no arquivo estilo.css

   #site{
     
       width:1000px;   
       height:700px;
       margin-top:0;     
       margin-right:auto;  
       margin-bottom:0;   
       margin-left:auto;   
       background-color:#666;
  }

Após definirmos a div principal do nosso site, a página ficará como mostra a Figura 3.

Na estilização de nossa primeira div definimos um tamanho, em pixels, de largura (width) e altura (height).

O atributo margin foi usado dessa maneira para um melhor entendimento, mas se quiser pode utilizar com uma única declaração, seguindo a ordem top, right, bottom, left, como por exemplo: margin: 0 auto 0 auto; ou ainda se preferir: margin: 0 auto;. Essa última assume o valor 0 para top e bottom e valor auto (automático) para left e right.

Colocamos uma cor de fundo com o background-color apenas para demonstrar a delimitação de espaço que vai ocupar na página, como mostra a Figura 3.

Figura 3. Div Principal.

Agora vamos definir os espaços principais da página, que é o cabeçalho (header), conteúdo e rodapé (footer).

Devemos obedecer a ordem de “cima pra baixo” no desenvolvimento do nosso website, assim devemos sempre começar pelo cabeçalho, depois o conteúdo (div do meio) e por último o rodapé.

Na Listagem 5 veremos como ficará o código atualizado.

Listagem 5. Inserindo divs para cabeçalho e rodapé.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title> Criando um layout de duas colunas tableless</title>
       <link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />
    
     </head>
    
     <body>
       <div id="site">
    
         <div id="header"></div>
        <div id="conteudo">
    
       </div>
       <div id="footer"></div>
    
       </div>
     </body>
   </html>

Após a criação do HTML, vamos estilizá-lo no arquivo estilos.css, agora vamos começar a dar forma para aquele código que utilizamos na Listagem 5.

Com o código da Listagem 6 o nosso projeto vai começar a ganhar forma.

Listagem 6. Estilizando cabeçalho e rodapé

   #header{   
       width:1000px;   
       height:100px; 
       background-color:#00F;
  }
   #conteudo{   
      width:1000px; 
       height:500px;
       background-color:#0F0;  
  }  
   #footer{ 
       width:1000px; 
       height:100px;    
       background-color:#C3C;
  }

No código acima nós estilizamos três div’s definindo sua largura (width), altura (height) e uma cor de fundo (background-color).

Com essas modificações, nossa página deverá ficar como mostra a Figura 4.

Figura 4. Página modificada.

Agora já temos bem delimitado, o cabeçalho (azul), espaço onde irá entrar o conteúdo (verde) e o rodapé (rosa).

Montada a estrutura da nossa página, falta apenas criarmos duas colunas na div conteúdo.

Iremos abrir novamente nosso arquivo index.html e dentro da div conteúdo iremos adicionar mais duas div’s, como mostra a Listagem 7.

Listagem 7. Separando a div de conteúdo em duas colunas

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title> Criando um layout de duas colunas tableless </title>
       <link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />
    
     </head>
    
     <body>
       <div id="site">
    
         <div id="header"></div>
    
         <div id="conteudo"><!-- abrimos a div conteudo -->
    
           <div id="conteudo-left"></div>
           <div id="conteudo-right"></div>
    
         </div><!-- aqui fechamos a div conteudo -->
    
        <div id="footer"></div>
    
       </div>
     </body>
   </html>

Essas novas div’s serão responsáveis pela separação do conteúdo em colunas, uma na esquerda e a outra na direita.

Em seguida, temos que estilizar o nosso arquivo estilos.css como mostra a Listagem 8.

Listagem 8. Adicionando estilo nas colunas de conteúdo

   #conteudo-left{
       width:500px; 
       height:300px;
       float:left;  
       background-color:#FF0;
  }
   #conteudo-right{   
       width:500px; 
      height:400px;    
       float:left;  
       background-color:#F00;
  }

No código da Listagem 8, além de definirmos a largura e altura, vamos usar o atributo float.

Parece estranho utilizarmos o mesmo atributo left ao bloco em que queremos posicionar na direita, mas como sabemos, o CSS é um estilo em cascata, em nossa div conteúdo definimos a largura de 1000px e na conteudo-left 500px. Ao definirmos o conteudo-right com 500px e à esquerda, automaticamente, ele ficará à direita do conteudo-left, pois o máximo que a div filha poderá ter é 1000px, sendo 500+500=1000px .

Com essa atualização, nossa página deverá ser exibida, como mostra a Figura 5.

Figura 5. Página finalizada

Como podemos ver, nossa div de conteúdo está dividida em duas, uma na esquerda (amarela) e outra na direita (vermelha).

O desenvolvimento padronizado faz com que cada vez mais os usuários sejam beneficiados, pois dessa forma, cada site é exibido da melhor maneira possível e em qualquer navegador.

Um dos principais responsáveis por essa padronização é o W3C (ver seção de Links), um órgão especializado e responsável por definir as padronizações na internet.

Links

Sublime Text2: http://www.sublimetext.com/2

Notepad++: http://notepad-plus-plus.org/download/v6.1.8.html

Tableless: http://www.tableless.com.br

W3C: http://www.w3.org/