Busca

Boas práticas de Desenvolvimento com Padrões Web


Camadas de desenvolvimento client-side

Você pode se assustar com isso, mas a tabela foi um marco na história do design para web. Ela abriu portas. Mostrou caminhos.

10/10/2009 por Diego Eis
36 Comentários

Esse artigo foi publicado originalmente na Revista TIDigital de Abril de 2009.

A utilização de tabelas no desenvolvimento web foi um marco na história. Pode ser estranho falar isso, mas a verdade é que antes das tabelas os sites eram feios. As tabelas possibilitaram a criação de sites com 3 colunas. Você pode estar pensando que isso não é grande coisa. Mas em meados de 1996-97 isso era nirvana do design para web. As tabelas possibilitaram uma nova realidade para os designers. Foi uma mão na roda naquele tempo. Mas o desenvolvimento com tabelas é algo realmente doloroso. Controlar o layout sem influenciar a programação é um trabalho difícil de se fazer, que encarece o serviço.

Um dos principais problemas do desenvolvimento com tabelas é a mistura das camadas. Nós não conseguimos dividir o desenvolvimento em camadas. As três principais camadas, que você já deve conhecer são: informação, formatação e comportamento. 
O HTML é responsável pela camada de informação. É ele que vai definir importâncias e significado para toda a informação que consta no site. Essa camada é especialmente importante. Os buscadores e os leitores de tela dependem de um HTML bem escrito e semântico para que funcionem plenamente.
O CSS é responsável pela camada de formatação. É ele que vai controlar todo o visual e estruturação do site.
O Javascript e o Ajax controlarão a terceira camada que define qual será o comportamento dos elementos manipulando o código CSS.

A divisão por camadas é a alma do novo desenvolvimento para web. Pouquíssimas pessoas sabem das influências que ela pode trazer, não apenas no código do site, mas também em toda a organização da equipe em empresas. Hoje há especialistas em HTML e CSS, coisa que nunca imaginaríamos no começo da web. Empresas fazem questão de treinar em HTML e CSS, profissionais das suas equipes, que cuidam de Arquitetura de Informação e Usabilidade, mesmo que eles não trabalhem diretamente com o código client-side. Isso faz com que toda a equipe se transforme e saiba das possibilidades e limitações dos projetos.
Durante muito tempo agências web achavam que o desenvolvedor deveria ser uma espécie de canivete suiço. Lembro-me que haviam empresas que procuravam designers que soubessem duas ou três linguagens server-side e programadores que entendessem bem de photoshop, fireworks e illustrator. Pague o salário de um e leve dois. Contudo, também haviam profissionais que achavam que ele deveria ter exatamente este perfil. Talvez por pressão do mercado ou até mesmo porque ninguém entendia direito esse negócio de web.

Quando comecei a ministrar cursos e palestras em empresas sobre este assunto, eu me assustava com a falta de conhecimento e interesse dos profissionais. Eles estavam desenvolvendo a anos utilizando tabelas para a estruturação, sem separar as camadas e fazendo todo o processo de desenvolvimento linearmente. Então chega alguém e diz para eles que está tudo errado e eles precisam reaprender. Eu também ficaria assustado com isso.
Outro ponto ruim era o preconceito com novas idéias. Eu já cheguei a perder uma oportunidade em uma empresa de web porque eu não desenvolvia para Netscape 4 e não fazia sites utilizando o Dreamweaver. O mercado tinha um cenário muito diferente do que temos hoje.
Os novos desenvolvedores nasceram sabendo que estruturação de sites se faz com divs e CSS. E que tabelas servem para exibir dados tabulares. Eles nem imaginam que antes nós quebrávamos nossas cabeças para criar sites arrasadores com uma infinidade de tables, tds, trs, tags fonts e centers. Melhor para eles. Melhor para o mercado.
Dar atenção a um código XHTML bem escrito, com uma bela formatação CSS, significa que o site poderá ser bem acessado por um público ampliado. É abrir portas para deficientes e usuários de diversos dispositivos. É melhorar a indexação em buscadores e facilitar o desenvolvimento de novas versões. É fazer com que a equipe trabalhe independentemente. Isso aumenta as vendas e as possibilidades de novos negócios, idéias, entre outras possibilidades.

Estou feliz porque os browsers também mudaram sua maneira de olhar as coisas. O pessoal que desenvolve o Internet Explorer está com a mente aberta para novidades. A Guerra dos Browsers ainda não acabou, e provavelmente está longe de acabar. Acontece que a Guerra de hoje é mais saudável. Todos ganham. Principalmene usuário final e desenvolvedores. Os fabricantes de browsers descobriram que há caminhos mais inteligentes de conquistar os usuários.

Não sei se estou conseguindo fazer-me entender. Mas quero que você olhe com outros olhos o código HTML, CSS, Javascript, Microformats e qualquer outra linguagem que trabalhe no cliente.
Os padrões web não estariam tão em foco hoje se essa importância não fosse tão explicita.

O que me empolga mais é que daqui pra frente o mercado de desenvolvimento para web tende a ficar mais interessante. Idéias de novos meios de acessar a web estão surgindo todos os dias. Não demorará muito para acessarmos a internet de outros dispositivos que não sejam smartphones e desktops. A internet está se tornando realmente popular agora. Mais empresas descobriram que a internet é algo que pode trazer lucro e abrir novas oportunidades. Uma pena que elas tenham aberto os olhos apenas em tempos de crise. Mas isso é uma outra história.

Este artigo foi originalmente publicado na Revista TIDigital do Mês de Abril de 2009

36 Comentários

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

36 Comentários

Thiago Retondar 10/10/2009 às 13:45

Nada a declarar, a não ser: excelente texto publicado, selecionou direitinho.

;)

Rodrigo 10/10/2009 às 16:42

Grande artigo, obrigado! Só uma detalhe, creio que por engano ficou escrito que tanto o CSS quanto o HTML são responsáveis pela camada de informação. Não seria o CSS responsável pela camada de formatação? Se estiver equivocado por gentileza, avise-me. Abraços!

Daniel Lobão 11/10/2009 às 17:13

Só uma coisa Diego, você colocou que o CSS cuida da parte da informação, mas no caso seria formatação, seguindo a linha do texto. Foi só desatenção. Quanto ao conteúdo: nada a acrescentar, ótimo como sempre.

Ainda acho que vocês poderiam fazer uma sequência sobre diretivas front-end como o Google Page Speed e o Yahoo! Performance Best Practices.

Sérgio Rodrigues 12/10/2009 às 08:46

realmente o desenvolvimento web chegou a um ponto no qual foi declarada a falência de algumas empresas que ainda criam seus códigos de forma errada, eu particularmente sou da época em que sites eram feitos a base de “tables”, ao perceber que estava fazendo a forma errado, repensei meus conceitos e comecei a estudar novamente, sites como o Tableless e Pinceladasdaweb, e livros como do amigo Maujor me ajudaram a “regularizar” minha forma de trabalho. ótimo artigo!

Renato Giovanny 12/10/2009 às 13:09

“O CSS é responsável pela camada de informação.”
O correto não seria
“O CSS é responsável pela camada de formatação.”

Ótimo texto! Eu mesmo começei “desenvolvendo” websites com flash, até que um dia um amigo me disse que eu me daria muito bem se integrasse meus sites com banco de dados. Na época eu trabalhava numa gráfica, com DTP. Convencí a gráfica a bancar um curso de desenvolvimento web para criermos o nosso site de e-comerce (em 2002) e foi ai que saí de vez do mundo DTP. Sendo assim, no meu curriculum constam conhecimentos na área de diagramação e tratamento de imagens, além do desenvolvimento web.

Matheus 13/10/2009 às 08:50

muito bom texto!!!!

realmente, depois da crise, a internet está sendo o alvo/solução d emuitas empresas!

Chris Benseler 13/10/2009 às 09:27

Concordo com tudo isso, Diego; o profissional “canivete”, ainda bem, está em extinção. E isso não quer dizer que o especialista em A não tenho que ter conhecimentos em B, muito pelo contrário.
No mais, tanto tabelas como o uso de frames pra criar layouts mais bacanas – header, content, footer, 3 colunas – era o “must” nos anos 90, e eu mesmo usei muito isso, junto com o Frontpage… :-/

[]s!

Acelio F 13/10/2009 às 09:37

Velhos tempos…

Só complementando…

lembro que quem “revolucionou”, começando a utilizar “divs” no lugar das tabelas foi o site UOL.
Na época, um portal cheio de coisas e badulaques que se mexiam, muito flash(V3.0) e tal.
O uso foi para que o usuário não ficasse vendo o efeito “tela branca”. Esperando o navegador carregar tudo aquilo, que estava dentro da tabela, pra depois mostrar algo na tela. A conexão era discada e os navegadores IE5 e Netscape3.

A solução deles foi usar divs em linhas (horizontais), com posicionamento absoluto, e fazer carregar primeiro a parte de conteúdo que era mais leve, e depois as “parafernálias visuais” e o que vinha do banco de dados.
A mudança foi inacreditável.
O carregamento aparecia por partes e não se ficava mais esperando tanto…
ACHO que isto foi em 97/98, quando eu estava começando a “fazer” sites, e já adotei o uso de divs.
Hoje o uso de divs mudou: uma div dentro de outra, dentro de outra, dentro de outra. Como uma tabela.
Este uso, em relação ao carregamento, não otimiza muito. O navegador tem que ler a tag de fechamento da div mãe, pra mostrar o conteúdo.
Os navegadores de hoje ajudam muito, carregando as imagens depois do texto, e, só depois, os fundos…

Outra coisa:
Ainda saem sites, novinhos, vindo de agências, usando tabelas, menu com imagens sem “alt”, links sem “title”…
Tudo que a dupla Dreamweaver/Photoshop fazem automaticamente, está lá.

Marcos Paiva 13/10/2009 às 11:07

Linda explanação!

Danilo Rosa 14/10/2009 às 08:37

Vejo que existem, ainda, sites em tabelas pela fato de que programadores (não designers que tem tempo pra ficar trabalhando um CSS) são obrigados a fazer o leiaute também. Ora! Imagine nós tendo que algumas vezes fazer toda estrura de banco, programação de baixo nível, tratamento das mil porcarias que os usuários podem fazer, se ficarmos fazendo toda uma estrutua de CSS e divs, vamos ser demitidos pq os chefes estão C&A (cagand….e andand..) pra isso. Querem pronto, funcionando e pra ontem.

Entendo a importância de uma formatação bem feita. Já trabalhamos com uma empresa que nos entregou o leaiute pronto e com o CSS funcionando. Foi sensacional! Só que quase sempre o cliente e chefes não querem pagar isso e perder o tempo que esses terceiros levam fazendo o leiaute. Vem sempre aquela frasezinha besta: “não tem pronto na internet pra baixar?”

Disse isso para que não condenem os programadores baixo nível como se fossem “bandidos”, porque eles que não tem tempo, e não podem ter, de fazer leiautes fora de tabelas. É impossível! Imagine fazer um site completo (leiaute, banco, administração e programação as seções) num tempo de no máximo 5 dias. Eu particularmente levei uma semana fazendo (desenhando no fireworks) e formatando no css um site. Esso foi o caso raro que tive tempo.

Daniel Palmerio 14/10/2009 às 09:54

Excelente! Como é bom ouvir “Empresas fazem questão de treinar em HTML e CSS, profissionais das suas equipes, que cuidam de Arquitetura(…)”. Sou designer e sempre achei dificil ser bom em estruturar informação e ser programador ao mesmo tempo. Sempre achei que era uma dificuldades só minha.
Concordo plenamente que deve existir uma divisão de águas para que todas as partes façam seu trabalho com mais expertise!
abraço

Edy Segura 15/10/2009 às 12:08

Ótimo texto sobre desenvolvimento web em camadas.

Conheci o “caminho da luz” em meados do ano 2000 através do tableless.com.br na sessão de sites convertidos.

Sou muito grato pelo esforço do Diego Eis e do Élcio Ferreira pela divulgação dos padrões web em nosso país.

Agora minhas considerações:

CSS para informação? JavaScript/Ajax para alterar o comportamento CSS?

CSS = Formatação/Apresentação/Estilização (Tecnologia pela qual podemos formatar nossa informação que está semanticamente estruturado pelo HTML/XHTML)

JavaScript = Comportamento
Comportamento = (Eventos + Acões)

Ou seja, o comportamento não se limita apenas a alterar CSS e sim toda a estrutura HTML/XHTML através da API DOM e a manipulação de eventos.

Psysapiens 15/10/2009 às 14:18

Tableless, Web Standards,Semântica entre outros, são nomes fáceis de se encontrar na boca de desenvolvedores, mas a realidade e outra. Ainda existe um longo caminho pela frente, até “Chefes” entenderem que ter profissionais especializados em cada “camada” de desenvolvimento e mais eficiente que ter um profissional* “canivete suiço”.

Bom texto Deiego!

[]‘s

*sobrinho que fez curso de: dreamweaver, fireworks,…

Guto Gomes 15/10/2009 às 17:45

Excelente texto Diego. Álias eae quando vamos ter aqui no tableless um texto falando sobre HTML 5 para clientes? Por quê não desenvolver, Vejo muitos debates em blog como do, sergiorodrigues, pinceladas da web, maujor…

Coloca ai também Diego pra ver como a galera reage aqui no seu blog, e coloque a sua opinião aqui também :)

Abrs!

Mudanças 22/10/2009 às 12:06

O autor do texto tocou num ponto importante ao falar da programaçao web em meados dos anos 60, acredito que 99% das pessoas que usam hj a internet nao sabe que ela ja foi usada para operaçoes como a chegada do homem a lua e taticas militares muito antes de pensarmos em algo do tipo.

Tableless uma boa? - João Moraes 22/10/2009 às 13:42

[...] Vale a pena ler: camadas-de-desenvolvimento-client-side [...]

giuliano 26/10/2009 às 08:48

A dificuldade que encontro é que sou designer e já fiz um hotsite estático em tableless e levei muito tempo para construí-lo, pois não existe um editor de tableless para facilitar o trabalho do designer – tudo na mão grande. Sei da importância de mudar os conceitos, mas não consegui ganhar em produtividade. Meu caso é particular pq sei que agências maiores tem equipes que cuidam das várias etapas.

Czech Hunter 26/10/2009 às 16:38

Tenho a impressão de ter lido a mesma coisa nos seus dez últimos textos.

Me desinteressei pelo tableless.com.br por causa disso.

Claudio 06/11/2009 às 18:24

Excelente texto. Feito por quem saber das coisas. Parabéns !

Jefhcardoso 08/11/2009 às 11:57

Horrorosos os sites eram antes das tabelas eu diria. As tabelas descortinaram um horizonte para os designers da Web.
HTML nas informações, CSS na formatação e Javascript e Ajax (os comportamentais), são como três mosqueteiros do designe da Web.
A qual tipo de deficientes você se refere sobre a abertura de portas neste texto?
Creio que no passo em que vai a guerra dos browsers se tornará “a guerra dos 100 anos da web”. Estou dizendo algum absurdo?
Fique em paz, amigo, seu objetivo fora plenamente alcançado, essa visão mais complacente para com o código HTML, CSS, Javascript, Microformats e etc, é extremamente sedutora em suas palavras; e não lamente irmos a passos lentos, o importante é irmos.
Agora mudando de assunto, posso lhe fazer um convite, a você e aos seus comentaristas e leitores de comentários? É que tenho um blog, algo bem diferente deste universo Web, mas sem deixar de ser mais uma das faces da Web em desenvolvimento, é o que eu e alguns amigos chamamos de “A Nova Literatura”. Meu blog possui textos meus e fotos (maior parte de minha autoria).
Bem, se não for pedir muito, faça-me uma visita. Se gostar, comente. Agora se achar que vale a pena, divulgue (sorriso discreto).
http://jefhcardoso.blogspot.com/ Abraço e boa sorte!

Andrew 12/11/2009 às 04:17

Realmente cara, esse texto está perfeito!

Continue assim, e parabens!

Abraços, Andrew

Joseph Dionisio Biesek Rocco 18/11/2009 às 08:41

Na minha opinião o profissional de TI que não é canivete suiço ele não está apto para trabalhar, por que ele não consegue interagir com equipe.

Uso de tabelas e div`s são específicos, não existe banir tabelas para formatar somente em div`s… Existe designer`s que pregam somente o uso do div, acredito que não é bem a realidade.

O detalhe eh que muitos desses designer`s apanham para tabelas, não conseguem ler e estruturar uma tabela da forma correta e por fim, acabam criticando a mesma.

Para esses designer`s é muito mais fácil encher a página de div`s hierarquicos do que fazer uma estrutura com table td`s e tr`s(O que no final das contas é tudo a mesma coisa).

Hoje temos a evolução dos browser`s, a evolução da banda, a evolução da tecnologia de desenvolvimento e mesmo assim as tabelas continuam firmes e fortes, por que elas são EXTREMAMENTE necessárias para a completa excelência de um bom site.

Acho um erro essa falsa propaganda sobre os div`s serem a substituição das tabelas, cada um tem a sua função específica. Claro que antigamente, por falta de uma tag que formatasse a página em blocos independentes se ultilizava tables para qualquer coisa.

Mas hoje, com toda a evolução, tanto faz se os conteúdos são separados e independentes, ou possui uma div dentro da outra, ou uma table que possui varios div`s ou um div que possui varias tabelas. O importante mesmo é o visual final do produto, por que no fundo, que não é tão fundo, o usuário final NÃO QUER NEM SABER DISSO, e é isso que importa.

Eu acho que um profissional de TI deve dominar todas as tecnologias possíveis para a capacidade dele, profissionais sem capacidade de continuar evoluindo e aprendendo novas tecnologias morrem no mercado.

E eu acho que as ferramentas da adobe é o minimo que um profissional, que se diz profissinal, deve dominar.

Saber fazer animações e programar no flash, ultilizar o dreamweaver de forma a ultilizar o máximo da ferramenta, saber ultilizar o fireworks com excelência(quem realmente sabe o objetivo do fireworks sabe o que eu estou falando), Illustrator, saber o que é diagramação e ter conceitos complexos sobre editoração eletrônica, ou seja, dominar o InDesign, CorelDraw e vetores.

Um programador que só sabe programar não serve para ser programador web.
Um Webdesign que só sabe design, olha… nem sei definir um cara assim.

Ou seja, a web requer: conhecimento, inteligência, arte, conceito, lógica, trabalho em equipe e muita força de vontade. Um canivete suiço!

Arthur Amaral 26/11/2009 às 07:49

Sensacional o artigo! Eu me lembro que antes de conhecer as tabelas eu tinha um site que usava frames, era horrível!
Parabéns pelo blog!
Abraços.

Fabrício 01/12/2009 às 15:36

Grande Diego…

Parabéns pelo artigo, simplesmente excelente!

Matheus Davidson 08/12/2009 às 13:46

Excelente texto, tenho que concorda 110% com oque voce disse, ja com algumas pessoas nos comentarios acima que diz nao ter tempo e que div atrasa, vai um conselho, pode ser dificil no primeiro, segundo, terceiro site que vc faca, porem quando aprender a montar a estrutura tableless, vai ver que o dificil eh usar tabela pra estruturar sua pagina, pois tabela te coloca varias limitacoes, ja uma estrutura div abre totalmente seus horizonte, ou seja, voce continua seguindo os padroes web, sem ter que seguir padroes de design(se eh que me entende).

Resumindo, *APRENDA* tableless, faca bom uso das TAGS HTML e aplique bem o CSS e vera que isso vai facilitar muito a sua vida!

Nanuni Kokoritu 10/12/2009 às 10:42

Muito interessante! Fico pensando como era fazer um site em tabelas antes de qualquer frontpage da vida. Devia ser bem complicado se encontrar no meio do código.

Tableless é muito mais facil de se localizar.

Christiano 14/12/2009 às 08:29

Mas ainda hoje encontramos empresas que procuram por desenvolvedores ‘canivete suiço’ e que não compreendem ou não praticam a fundo a separação de camadas em seus projetos.

É um árduo processo de transformação cultural. Mas ainda assim um caminho sem volta, um caminho mais feliz…

Supertech 14/12/2009 às 09:28

Eu concordo e temos que tornar antes de tudo os navegadores padrão. Cansei de ficar quebrando a cabeça para um site rodar 100% em todos eles, eles que devem se adequar a nós. Mais uma vez belo artigo, parabéns.

Tiito 15/12/2009 às 02:26

Nada a declarar, a não ser: excelente texto publicado.

segurança na rede 23/12/2009 às 09:49

Não adianta o profissional tentar desenvolver em vários campos para atender a empresa. É melhor para sua carreira se especializar em determinado campo. Se não vira um faz tudo.

Danilo Rozisca 20/01/2010 às 07:28

Realmente, eu iniciei desenvolvendo vários sites usando table, quando conheci a metodologia de web standards, xhtml, css, web semantica tecnicas de web marketing, e Arquitetura da Informação… ” ai sim, fomos surpreendidos novamente “.

Rarylson Freitas 23/03/2010 às 00:48

Gostaria de tecer alguns comentários a respeito das afirmações feitas pelo Joseph Dionisio Biesek Rocco.
Concordo em parte (em pequena parte) com o que ele disse. O desenvolvedor web deve ser sim, um canivete suíço, mas não no sentido de realizar todas as atividades, mas sim no sentido de conhecer cada uma das atividades. Desse modo, com um conhecimento generalista, tal profissional poderia ocupar, em um futuro, um cargo de gerência.
Entretanto, não desejasse uma equipe onde todos fazem todas as atividades ao mesmo tempo. Ao contrário, procura-se modularizar as atividades, utilizar camadas e minimizar a dependência entre as camadas. Isso possibilita maior produtividade, facilita a manutenção, possibilita melhor gerência do projeto, dentre outras inúmeras vantagens.
Quando se desenvolve um site (em um trabalho de uma semana) pode parecer que a divisão em camadas é perca de tempo, mas sites necessitam de manutenção (e sistemas necessitam de mais manutenção ainda). Pode até ser possível gerenciar um site pequeno que não seja devidamente modularizado, mas isso é de fundamental importância em um sistema grande que necessite de uma grande equipe de desenvolvedores.
É importante sim que um profissional tenha conhecimentos de banco de dados, arquitetura de informação, designer, programação, estruturação e etc, mas geralmente esse conhecimento é obtido alocando-se o profissional nas mais diversas áreas ao longo do tempo (por exemplo, alguns meses trabalhando com HTML/CSS, outro mês com PHP, outro com JavaScript) e sem perder o foco na modularização. Isso é bom principalmente quando o profissional é jovem e desenvolve atributos essenciais de um gerente. Caso o profissional se identifique em uma área específica, ele poderia, por ventura, vir a se especializar naquela área.
Por fim, além da gerência, da manutenção, do reuso e de tudo que está atrelado na engenharia de um software, tem o fato de que o apropriado das tags HTML agiliza na renderização e facilita o trabalho dos motores de busca.
Pelo o que Joseph Dionisio Biesek Rocco escreveu, ele tem resquícios de conhecimento gerencial, uma visão ainda limitada do assunto. Pode ser que isso seja fruto do fato dele não ter pego grandes projetos ao longo de sua carreira profissional, mas ele deve se preocupar em estar preparado para quando isso ocorrer.

Conteúdo, Flash e HTML | Boas práticas de Desenvolvimento com Padrões Web 29/04/2010 às 15:07

[...] falamos sobre a importância de separar o desenvolvimento web em camadas, queremos que o desenvolvedor web entenda que há um motivo por trás de toda essa metodologia. [...]

Conteúdo, Flash e HTML « …tecnologicamente correta… 04/05/2010 às 09:04

[...] falamos sobre a importância de separar o desenvolvimento web em camadas, queremos que o desenvolvedor web entenda que há um motivo por trás de toda essa metodologia. [...]

Mingo Max 21/05/2010 às 12:11

Nossa, falou tudo, tb sou do tempo em que as tabelas reinavam, e como desenvolvedor de backend, sei o quanto sofriamos!

Ainda bem que o mercado mudou e está mudando, felizes aqueles que estão na onda…

Belo artigo, parabéns.

Gláucio Bedim – Publicitário, Desenvolvedor Web, Professor… » Blog Archive » Conteúdo, Flash e HTML 07/06/2010 às 23:14

[...] falamos sobre a importância de separar o desenvolvimento web em camadas, queremos que o desenvolvedor web entenda que há um motivo por trás de toda essa metodologia. [...]