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/