Desenvolver sites e aplicações pra web usando os padrões web significa, basicamente, usar cada tecnologia para o propósito único para o qual ela foi desenvolvida. Com isso, acabamos por organizar nosso código em “camadas”. São elas conteúdo, apresentação e comportamento. Vamos ver, separadamente, o que significa, para que serve e como desenvolver cada camada separadamente.
Neste texto vamos dar uma rápida passada pelas duas primeiras camadas, a de conteúdo e a de apresentação. A de comportamento fica para um próximo post.
Conteúdo
A camada de conteúdo é, sem sombra de dúvida, a mais importante de todas. É onde colocamos a parte mais preciosa do nosso site, aquilo que realmente faz a diferença no fim das contas — o conteúdo (surpresa!).
Para desenvolver essa camada usamos as chamadas linguagens de marcação de hipertexto, no nosso caso HTML ou XHTML.
O desenvolvimento deve sempre começar por esta camada. Antes de se preocupar com a parte visual ou comportamental de um site ou aplicação, deve-se estruturar com o maior cuidado e critério possível o conteúdo.
Quando você for começar a realmente pôr a mão na massa e escrever código, mesmo que já tenha um layout definido, tente não pensar na parte visual. Se atenha ao conteúdo. Como esse conteúdo é dividido? Que partes compõem esse conteúdo? Qual a função de cada parte do conteúdo dentro do site?
Tendo isso em mente, ordene essas partes por ordem de importância e relevância para os usuários. Certifique-se de que o que é mais importante seja colocado antes no código.
Preocupe-se com a semântica. Use os elementos certos para marcar o conteúdo. O HTML te dá uma quantidade consideravelmente boa de elementos para estruturar o seu conteúdo.
Abra o seu HTML puro em um browser. O que você vê na tela faz algum sentido? Verifique se é possível navegar tranquilamente pelo conteúdo usando o teclado.
Lembre-se, todo o restante do processo de desenvolvimento do seu site vai depender de como o seu conteúdo está estruturado. Se as coisas não estiverem bem estruturadas nessa camada, você vai, certamente, ter problemas no futuro. Revise o seu código, mexa no que tiver de ser mexido agora. Mais tarde pode ser tarde demais e o tempo que você vai perder será muito maior, acredite.
Estando tudo certo com a estruturação do conteúdo, podemos passar para a próxima camada.
Apresentação
Agora é a hora de aplicar aquele belo layout que você (ou o seu designer) criou para tornar o seu conteúdo mais atraente.
Nessa camada, vamos usar o CSS para definir propriedades visuais para cada elemento do seu conteúdo.
O mais importante aqui é manter as coisas simples. Evite usar propriedades que possam causar problemas em diferentes browsers. Em geral é possível criar qualquer tipo de layout usando apenas aquilo que é largamente suportado.
Resista à tentação de mexer na camada de conteúdo para satisfazer uma necessidade especificamente de apresentação. Pense um pouco mais. A solução pode ser mais simples do que você pensa. Use esse artifício apenas em casos de desespero total, quando tudo o mais falhar.
Lembre-se, se você tem um problema, é grande a chance de que alguém já tenha tido o mesmo problema e o tenha resolvido. Também é grande a chance de que esse alguém tenha publicado, em algum lugar, a solução, quem sabe, com uma bela explicação. Uma busca no google é sempre uma boa pedida.
Teste freqüentemente o resultado, de preferência em diversos browsers. Principalmente nos mais usados (IE, Firefox, Opera e Safari).
Quer uma dica? Use como base de testes um browser que tenha um melhor suporte aos padrões web. Firefox é uma bela opção para os usuários de windows. Para quem usa Mac, o Safari é a melhor opção.
O Internet Explorer é, de longe, o browser mais usado, mas tem um suporte bastante precário aos padrões. Por isso, se você tomá-lo como base para o seu desenvolvimento, será muito mais complicado consertar as falhas que serão notadas nos outros browsers.
Se você fez tudo direitinho até aqui, você tem um site bem estruturado e visualmente agradável e consistente.
Update: Leia o post sobre a camada de comportamento.
Leia também:
- Crie formulários que submetam com um ENTER
- Padrões web: Desenvolvimento em camadas - Camada de comportamento
- HTML - Esqueleto de um documento HTML - Parte 3: Outros elementos do HEAD
- Como fazer links que funcionem com e sem JavaScript
- HTML - Esqueleto de um documento HTML - Parte 1: DOCTYPE
- Hospedagem de sites Dreamhost: 50% de desconto
- Comprar: Notebook HP, Notebook Intelbras, Notebook Positivo, TV LCD, Camera Digital
Maio 22nd, 2006 at 8:33 am
Muito bom o texto. Faltou falar do javascript. heheh.
Muito bom mesmo.
Maio 22nd, 2006 at 9:52 am
Bem legal as dicas, parabéns!!!
Maio 22nd, 2006 at 10:31 am
Ótimo post! Esse blog vai ficar como referência pra quem tá começando.
[]s!
Maio 22nd, 2006 at 10:35 am
Muito bom, bem interessante!
Maio 22nd, 2006 at 1:54 pm
Muito boa as dicas!
Maio 24th, 2006 at 8:24 pm
Dicas realmente muito valiosas, muitas pessoas ainda enfrentam dificuldade na hora de separar as “peças” para fazer as coisas funcionarem.
Aguardo o próximo post, sobre comportamento.
Abraços!
Maio 30th, 2006 at 9:53 am
Tem uma figura que ilustra bem isso:
http://201.3.90.11/wasp.png
Maio 30th, 2006 at 11:58 am
Mandou bem! Galera vamos ajudar o site clique nos anuncios nao custa nada!
Eu clicko nos anuncios e dai?
Junho 8th, 2006 at 1:44 am
[...] Iniciantes, principalmente aqueles que estão descobrindo os padrões web, desenvolvimento em camadas, semântica, acessibilidade, usabilidade, you name it, acabam por entrar em um estado de “xiitismo” crônico que não leva a nada e acabam aumentado e muito a chance de cultivar desafetos ao longo do caminho. [...]
Junho 21st, 2006 at 5:22 pm
Excelente o post. Padrões web, css = futuro da internet!!!!
Setembro 11th, 2006 at 8:39 am
[...] Pensando nisso irei debulhar o dito cujo. E para isto usarei o desenvolvimento em camadas como vocês verão a seguir. O sistema baseia-se em uma lista de notícias que fica rodando. Mas chega de ficar falando na teoria e mão à obra! [...]
Setembro 23rd, 2006 at 12:52 am
[...] Não é difícil encontrar por aí sites que misturam em seu HTML algumas pitadas de JavaScript, estilização (nem sempre via CSS), etc, etc. Em web standards o desenvolvimento de websites é feito em camadas, mais especificamente em três, onde cada uma tem o seu valor e exerce papel fundamental no bom funcionamento do site. Vamos falar um pouco sobre essas três camadas: [...]
Outubro 27th, 2006 at 4:22 pm
[...] O DOCTYPE Transitional é, como o nome diz, uma transição entre versões mais antigas do HTML e a versão mais nova, 4.01. Nele temos alguns elementos e atributos que definem apenas apresentação e não semântica (Leia meu texto sobre desenvolvimento em camadas) e devem, a rigor, ser eliminados de nossos documentos. Além disso, um DOCTYPE HTML 4.01 Transitional faz com que a maioria dos browsers trabalhe em modo de compatibilidade, o que não é nada desejável. Portanto, o DOCTYPE Transitional deve ser evitado a todo custo. Não use nunca. [...]
Outubro 29th, 2006 at 1:44 am
[...] O elemento STYLE serve para aplicar estilos diretamente dentro do documento HTML. É importante notar que para reforçar a questão da separação em camadas, devemos evitar ter estilos aplicados desta forma. [...]
Fevereiro 17th, 2007 at 11:21 am
Trabalhando sob pressão…
Trabalhar sob pressão hoje em dia é necessário mas, ninguém merece! Estou passando por uma situação semelhante onde trabalho. Todos os dias o meu chefe pergunta duas ou mais vezes sobre o andamento de um mesmo trabalho. Ok, eu entendo que o trab…
Abril 20th, 2007 at 1:54 am
[...] em outro post, se vocês acharem necessário), que é, basicamente, o uso racional e correto do desenvolvimento em camadas. Algo tão simples quanto começar do começo, dar um passo de cada vez para chegar a um resultado [...]
Maio 1st, 2007 at 4:56 am
[...] você quiser fazer algo bonito, com AJAX e tudo mais, faça em outra camada. Na camada de comportamento. Já falei sobre isso aqui em alguns posts então não vale a pena [...]
Junho 6th, 2007 at 11:30 am
Parabéns pela matéria e sucessos!
Junho 19th, 2007 at 8:44 am
[...] Desenvolvimento em Camadas [...]
Outubro 9th, 2007 at 1:54 am
[...] para tornar uma página mais bonita, nunca para alterar seu conteúdo. Sugiro que você leia o meu artigo sobre desenvolvimento em camadas, para ajudar a entender melhor essas [...]
Outubro 17th, 2007 at 12:00 am
[...] formatação visual (conteúdo fica só no html, formatação visual fica só no css. Isso se chama desenvolvimento em camadas), o que acontece quando se usa um <i> ou <b> no meio do [...]
Março 7th, 2008 at 11:17 pm
[...] você viu no começo desse curso e nesse texto que eu te passei, html é pra conteúdo e CSS é pra [...]
Março 9th, 2008 at 9:44 am
[...] Padrões web: Desenvolvimento em camadas [...]
Março 24th, 2008 at 10:21 pm
[...] de ir pro conteúdo, leia esse artigo d’O Básico da Web sobre Desenvolvimento Web em Camadas, pra entender exatamente qual a função do que você vai aprender [...]
Abril 20th, 2008 at 11:18 pm
[...] pra web, começando com cliente/servidor e parando na parte dos padrões web, passando pelo desenvolvimento em camadas. Muito [...]
Abril 21st, 2008 at 11:29 am
[...] Depois teve a minha palestra, falando sobre “web 2.0: + poder pro usuário”. Para complementar passei o vídeo que achei muito interessante: desenvolvimento em camadas. [...]
Abril 22nd, 2008 at 10:19 pm
[...] você viu no começo desse curso e nesse texto que foi indicado, html é pra conteúdo e CSS é pra [...]
Maio 9th, 2008 at 12:53 pm
[...] uso desta tecnologia, é muito importante prestar atenção na técnica de desenvolvimento de sites em camadas. Fazendo primeiro a camada de conteúdo e aplicando a camada de comportamento posteriormente, [...]
Junho 17th, 2008 at 9:46 am
Olá pessoal alguem sabe como posso transformar meus sites antigos para deixalos no pradrão atual?
meu portifólio: http://www.marcosbatista.com
obrigado!
Novembro 3rd, 2008 at 10:48 am
Quando se trabalha em projetos grandes, não tem como não dividir em camadas.
Em todos os níveis; tanto no que pode ser considerado server-side, quanto client-side, ou você isola as camadas, ou ficará louco ainda durante a implementação…
Novembro 14th, 2008 at 3:21 pm
[...] ou escrever trechos de códigos diretamente em páginas HTML. Isto ajuda a manter o conceito de desenvolvimento em camadas, permitindo que o conteúdo (HTML), os estilos (CSS) e os comportamentos (Javascript) fique em [...]
Janeiro 22nd, 2009 at 8:40 am
Li o seu artigo.Parabéns.
Para vc qual a melhor linguagem de desenvolvimento web ?
Janeiro 27th, 2009 at 9:10 am
Em Desenvolvimento Web projetos grandes não são facéis de se dividir em camadas.
Porém desde o webdesign, prototipação do projeto e desenvolvimento deve-se fazer um planejamento e um cronograma correto de todo o projeto.