Desde a publicação deste curso em 2007 eu venho recebendo feedbacks quase que todos os meses. Gente de todas as partes do país que me achou por aí ou que veio por indicação, e 95% deles foram com elogios ou relatando que aprenderam de forma legal e diferente. Obrigado! Por esse sucesso o curso foi reformulado e melhorado em 2011!

Pra você que cansou de material “enrolation” na Web e também não aguentava mais ficar desatualizado construindo suas páginas com tabelas chegou a hora disso acabar! . Resolvi tentar ajudar você elaborando minha versão própria de curso, que tem como objetivo ser muito claro e objetivo. Não quero com ele fazer você abandonar o uso de tags <table>, mas sim utilizá-las da maneira correta. É bom lembrar que o interesse aqui não é fazer ninguém sair trocando as tabelas pelos <divs> do dia pra noite. Tudo exige paciência e muito exercício.

Esse curso é para todos, até quem nunca tentou criar nada pra Web.

Vamos ao roteiro:

Tópicos da Aula 01

  1. O Tableless 
  2. Por que E Pra que
  3. A tag <div>
  4. Construindo uma estrutura simples

Tópicos da Aula 02

  1. Construindo uma estrutura mais elaborada
  2. Falando sobre CSS
  3. Diferentes navegadores. Diferentes resultados.
  4. Comentário pessoal do autor

Vamos nessa?!

1. O Tableless

Table + less, significa “sem tabelas”. Ou seja, vamos abortar o uso de  <table> para construir a estrutura da página. A onda de mudança começou com mais força em meados de 2008 para tornar as páginas mais compreensíveis e leves. Hoje se tornou a forma padrão e profissional para criação de páginas na WWW.

Os padrões da Web

O órgão W3C é um serviço que estipula padrões para o desenvolvimento Web e para a forma de se confeccionar páginas. Ela diz por exemplo que uma imagem deve ter um “alt” (<img src=”../caminho/logomarca.jpg” alt=”Blog do Henrique”>) ou que um <br/> deve ser assim.

2. Por que E Pra que?

Deus abençõe quem inventou o “padrão”. Ele existe para tornar algo de entendimento geral. Ele torna algo manipulável por qualquer tipo de pessoa e de um só jeito em qualquer lugar do mundo.

Alguns objetivos do Tableless

  • Proporcionar um rápido entendimento e manutenção de código já que o transforma em algo limpo, claro e organizado;
  • Agregar mais rapidez na abertura de páginas pelo navegador (renderização);
  • Facilitar e agilizar a construção de páginas independente de dispositivo.

3. A tag <DIV>

O <div> é uma tag HTML bem simples. Ela delimita determinada área da página, uma espécie de divisão. Pode conter qualquer tipo de conteúdo como texto, imagem, tabelas, lista, javascript, tudo mesmo!

Na prática fica assim:

<div>isto aqui é o conteúdo da div</div>

Os divs naturalmente ficam um abaixo do outro. A melhor maneira de manipular com páginas assim é usando o CSS (que será abordado mais na frente), você pode atribuir uma classe ou identificador para controlar se quer um DIV abaixo do outro, flutuando ao lado, etc.

Usando a opção CSS “float:left” fará com que por exemplo, ele fique assim:

<style type="text/css"> #div1 { float:left; background-color:#CF2323; width:70px; height:90px; } #div2 { float:left;background-color:#001582; width:70px; height:90px; } </style>

Entretando, apesar da W3C estipular padrões para o mundo todo, os fabricantes de navegadores correm contra o tempo para que seus produtos funcionam corretamente, isso quer dizer que podem aparecer resultados diferentes durante seus testes, diferenças de alguns pixels, as coisas podem aparecer fora de lugar.

Dica: Se você está tentando trabalhar de forma profissional com páginas da Internet, você deve testar suas páginas no Internet Explorer versão atual e anterior, no Mozilla Firefox atual, e no Google Chrome atual. Se outro browser aparecer atualize-se também!

4. Construindo uma estrutura simples

Quanto mais você quiser aprender mais dificuldade deve passar. Parece provérbio Japonês, mas é a realidade pra quem trabalha com Web. Abuse do Bloco de Notas ou do Notepad++ se você quiser aprender realmente. Esqueça a diversidade de recursos do Dreamweaver. Tá pronto pra fazer um teste? Vamos começar criando isto aqui:

Vamos às medidas, cores e outros estilos… O código CSS é quem vai desenhar tudo na tela, no momento em que terá medidas exatas do que precisamos.

Vamos à ele. Digita isso na sua página pra começar:

<style type="text/css">
#geral { width:100%; height:350px; }
#topo { width:100%; height:80px; background-color:#EC0002; }
#menu { height:210px; width:10%; float:left; background-color:#006FD8; }
#conteudo { width:90%; height:210px; background-color:#FFEB01; float:left; }
#rodape { height:60px; width:100%; background-color:#007D07; float:left; }
</style>

Já temos as posições e cores daquele desenho ali de cima.

Agora vamos aos divs…

Temos um topo, um menu, um espaço para o conteúdo e um rodapé para a nossa página, para todas as partes já definidos os seus tamanhos e cores ali no CSS.

Agora, vamos à estrutura:

<div id="geral"><div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>
</div>

Colocamos “divs” para conter todas as nossas seções (menu, topo, etc). Eles se tornarão “containeres” para outros conteúdos. Sempre lembrando que boa identação é primordial!

O nosso documento então ficaria:

<!DOCTYPE HTML> <head> <title>Henrique Araujo - Curso de Tableless (Aula 01)</title>
<style type="text/css">
#geral { width:100%; height:350px; }
#topo { width:100%; height:80px; background-color:#EC0002; }
#menu { height:210px; width:10%; float:left; background-color:#006FD8; }
#conteudo { width:90%; height:210px; background-color:#FFEB01; float:left; }
#rodape { height:60px; width:100%; background-color:#007D07; float:left; }
</style>
</head>
<body> 
<div id="geral"> 
<div id="topo">Minha logomarca</div>
<div id="menu">menu</div>
<div id="conteudo">conteúdo</div>
<div id="rodape">rodapé</div>
</div> 
</body> 
</html>

Ah, se você quiser já pode copiar todos os códigos em azul deste post e colar num arquivo nomeado com extensão .HTML que vai rodar tranquilo ;)

Pronto, agora dê asas à sua criatividade, e exercite esta aula inventando outras páginas Tableless!

Pronto pra a aula 02?

desenvolvimento, web

06/09/2007

21 Comentários