Arquivo da categoria: Web Standards

Desenvolvimento em camadas

Adotar os web standards vai muito além de substituir tables por divs. Existe toda uma filosofia de desenvolvimento por trás dos web standards que pode levar algum tempo para ser adotada, ou mesmo aceita. Por outro lado, essa nova filosofia de desenvolvimento traz consigo diversas vantagens, e eu até já falei um pouco sobre algumas delas.

Quando um profissional ou uma agência ou produtora web opta por migrar para o desenvolvimento de sites em conformidade com os web standards, ele (ou ela) está (ou deveria estar), na verdade, tomando uma decisão muito mais profunda e importante do que simplesmente escrever um código mais “limpo”. Um dos conceitos mais importantes que devem ser observados nesse momento é a forma como é construído o website.

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:

Conteúdo:
É aqui onde fica toda a informação do site, é a “markup” do site, o XHTML. No XHTML devem ser evitadas ao máximo as imagens que não exercem papel importante na disposição da informação no site, ou seja, as imagens meramente decorativas não devem, em hipótese alguma, ser inseridas aqui. Atributos de estilização “inline” também devem ser evitados a todo custo, para que funcione o conceito de “desenvolvimento em camadas”. Além disso, deve haver um zelo extremo pela semântica do documento, para que ele seja acessível ao máximo a mecanismos de busca e principalmente a portadores de deficiências visuais ou outros tipos de deficiência.
Um código limpo, bem estruturado e semanticamente correto é um excelente ponto de partida para o desenvolvimento em conformidade com os web standards, e também para a implementação das duas próximas camadas do desenvolvimento.
Apresentação:
É toda a formatação do conteúdo, a forma como ele se apresentará, através das CSS. Aqui sim, devem ser inseridas as imagens decorativas, formatados os textos, dividido o layout, etc. É hora de, através das CSS, implementar aquele belo layout que você criou, para tornar seu conteúdo mais atraente aos seus visitantes, afinal de contas, quem é que vai querer ficar num site que é texto puro?
O segredo aqui é sempre manter as coisas o mais simples possível (KISS). É bom levar em consideração o fato de que diferentes browsers podem interpretar uma mesma declaração de maneiras distintas e, por isso, é sempre bom testar os resultados em diferentes browsers, à medida que você vai escrevendo o código.
Conteúdo bem estruturado e devidamente formatado, é hora de passar para a terceira e última camada de desenvolvimento…
Comportamento:
É aqui onde vai toda a parte dinâmica do site, ou seja, o JavaScript, DOM ou que quer que seja. A camada de comportamento geralmente é usada pra dinamizar o site, tornando-o mais interativo e melhorando assim a experiência do usuário. Não vou me adentrar muito nessa camada pois reconheço que não sei o bastante sobre ela. Mas recomendo muito a leitura deste artigo do Bruno Torres e, caso se interesse mais, siga o link que ele passou no final do artigo.

Acredito que o desenvolvimento em camadas é uma etapa essencial na migração para os padrões. Ter a mente aberta para uma mudança tão grande nos conceitos de desenvolvimento requer mais do que vontade de mudar por parte dos profissionais; requer humildade para reconhecer que o método antigo (com o qual ele trabalhava, talvez, há anos) estava errado e que, se ele não se mobilizar logo e começar estudar a fundo os web standards, ele acabará ficando pra trás e perdendo mercado pra seu concorrente, que já está entrando também no mundo dos padrões web.

4 Comentários

Arquivado em Artigos, CSS, Semântica, Web Standards, XHTML

Quais são as vantagens de se adotar os Padrões Web?

Muitos desenvolvedores dos tempos antigos, quando a onda era “chapar logo uma table e ir dividindo as linhas e colunas” pra montar os layouts, apresentam uma certa resistência quanto aos web standards, muitas vezes por pensar que se trata simplesmente de construir layouts sem tabelas, e nada mais.
Convenhamos, não deve ser nada fácil aceitar o fato de que o método que você utiliza a vários anos pra fazer websites não é o correto e que você deve mudar – drasticamente – esse método.

“Mas meus sites sempre funcionaram legal e meus clientes sempre ficaram satisfeitos…”, é o que muitos podem dizer.
Será? Bem, a parte dos “clientes satisfeitos” pode até ser – porque eles não estão nem aí se o site é feito com table, div, ul, p, ou o que quer que seja. Mas mal sabem eles (os desenvolvedores “antigos”) que construir sites de acordo com os padrões implica em diversos fatores muito mais interessantes e importantes do que simplesmente abandonar as tabelas na estruturação de layouts.
Existem vários fatores que, se seus sites foram feitos basicamente com tabelas, certamente não “funcionam legal”, não. Vamos ver um pouco sobre dois, que julgo eu serem dos mais importantes deles.

  • SEO

    Sites escritos de maneira semântica tendem a fornecer informações mais relevantes a mecanismos de busca do que sites não-semânticos. Ou seja, quando algum robô de busca passa por um site semântico, ele sabe exatamente o que é um título (principalmente se esses títulos estiverem bem hierarquizados), o que é um acrônimo, uma abreviatura, uma lista ordenada, não-ordenada ou de definição, um endereço, etc, etc, etc. Informações essas que um site não-semântico jamais será capaz de fornecer a um robô de busca.
    Desta forma, a informação coletada por esses robôs a partir de sites semanticamente corretos estará melhor “mapeada” e mais acessível a usuários que pretendam pesquisar sobre tal assunto. Não precisa nem falar que esses sites (os semânticos) alcançarão melhores posições nas páginas de busca do que os sites não-semânticos, não é?

  • Acessibilidade

    O fato de um site ser escrito de maneira semântica, por si só, já contribui para que ele seja mais acessível, tanto para screen readers quanto para browsers textuais, por exemplo. Mas nem por isso o fato de que existem recomendações – e validação – acerca da acessibilidade de um site deve ser ignorado. Não entrarei em detalhes sobre esse assunto, pra não fugir do escopo desse post.

    Mas, falando dos benefícios que os Padrões Web trazem em relação à acessibilidade, caímos novamente adivinha onde… Na semântica, é claro!
    Conteúdos bem tratados (leia-se: escritos de maneira semântica) fornecem informações mais precisas e exatas para robôs de busca, leitores de tela pra deficientes visuais, etc. Além disso, os sites que seguem os Padrões Web têm a vantagem de poder serem visualizados corretamente em diversos browsers, em diversas plataformas, e de diversos dispositivos. Isso é acessibilidade.

Esses são só dois dos fatores mais importantes (na minha humilde opinião) que os Padrões Web acarretam. Mas eu tenho certeza que você tem mais alguma coisa a acrescentar. Let me know!

9 Comentários

Arquivado em Acessibilidade, Artigos, Semântica, Tableless, Web Standards

A regra dos Rótulos e Recipientes

Você usa “!” para fazer uma pergunta? Ou “,” para fazer uma exclamação? Por quê? Afinal de contas, é tudo símbolo de expressão do Português, qualquer um dá no mesmo, não é?

Calma gente, meu blog não mudou de tema e eu também não sou professor de Português. Só quero chamar a atenção para um princípio primordial para o desenvolvimento com web standards (como eu mesmo disse em outro post): a semântica.

Vejamos o que o nosso amigo Aurélio Buarque de Holanda nos diz sobre o que é semântica:

Estudo das mudanças ou translações sofridas, no tempo e no espaço, pela significação das palavras. Minidicionário Aurélio, 2ª edição, Rio de Janeiro, 1988.

Simplificando, podemos dizer que semântica é o estudo das manifestações do significado das palavras. Sendo assim, a semântica na web pode ser entendida como a manifestação correta das “tags”, de acordo com seu significado. Veja bem, a palavra “tag” pode ser traduzida do inglês como “etiqueta” ou, melhor ainda, “rótulo”. “Rótulos” devem dizer exatamente o que contém um recipiente. Já imaginou se você comprasse uma garrafa com um rótulo da Coca-Cola, mas dentro dessa garrafa viesse algum tipo de detergente? Tudo bem, foi um exemplo muito tosco, mas ilustra muito bem a mensagem que estou querendo passar.

Se o exemplo acima fosse verdadeiro, imagina que complicação seria. Imagina a dificuldade que seria para se achar um produto qualquer se estes não estivessem bem rotulados. Da mesma forma ocorre com documentos na web mal estruturados, escritos fora dos padrões. Quando se quer um parágrafo, usa-se o “rótulo” p, dentro do “recipiente” <p></p>; quando se quer escrever um endereço, usa-se o “rótulo” address, dentro do “recipiente” <address></address>, e assim por diante.

Mas, como toda regra tem sua exceção, a “Regra dos Rótulos e Recipientes” não poderia ser diferente. Veja bem, quando o que se quer é posicionar algum bloco de código em uma determinada área da tela, usa-se o “recipiente” <div></div> (e não table!). Mas, os recipientes <div></div> não possuem rótulos? Por quê? Segundo as recomendações do W3C, tanto o elemento div como o elemento span não possuem valor semântico algum, servindo apenas como agrupadores de conteúdo (containers, ou, melhor ainda, “recipientes”), ou seja, não possuem “significado” nenhum para SE‘s ou para leitores de tela para deficientes visuais. Se não possuem significado, não possuem “rótulo”, mas, já que servem pra agrupar trechos de código, podem ser chamados de “recipientes”.

Simples assim. Dessa forma, os SE‘s e os leitores de tela para deficientes visuais vão conseguir interpretar corretamente seus documentos. Cabe aos desenvolvedores conhecer bem os rótulos e seus respectivos recipientes mais apropriados em cada caso, para que ninguém corra o risco de “pegar detergente ao invés de Coca-Cola”.

Semântica é um assunto muito, mas muito extenso para se falar em apenas um post. Então por hoje é só, pessoal. Espero que a “Regra dos Rótulos e Recipientes” (que foi inventada assim, de última hora) tenha lhe ajudado a compreender um pouco melhor a importância de documentos bem estruturados e semanticamente corretos.

Um abraço a todos, e até o próximo post!

10 Comentários

Arquivado em Artigos, Semântica, Web Standards, XHTML

Validar ou não validar? Eis a questão…

Muito se tem falado sobre validar ou não XHTML, CSS, WAI, RSS, enfim, tudo o que pode ser validado em um site que se diga “webstandard”. Li um artigo no Blog do Maujor, entitulado “Sobre Selos de Validação” que me motivou a escrever este post, porém tomarei outro rumo na conversa.

Creio que, como desenvolvedores, devemos nos preocupar com a validação de nossos sites. Veja bem, eu disse sites, e não blogs! Quanto aos blogs, eles quase nunca validam, por conta da interface, já que a maioria usa templates prontos. O meu por exemplo, não valida. Culpa minha? Não!

Um site com XHTML ou CSS (vou me ater a essas duas áreas, pois é onde estou inserido) válido é sinal de tudo feito dentro dos conformes, significa que você se preocupou em fazer tudo da maneira certa, marcação e formatação seguindo os padrões. Será? Nem sempre. Você pode, por exemplo, usar um parágrafo associado a uma classe pra formatar um título. Vai validar? Claro. Segue os padrões? Claro. Que não! Nesse caso você estará ferindo um princípio primordial para o desenvolvimento com web standards: a semântica. Não vou adentrar mais nesse assunto por enquanto, mas com certeza num próximo post.

Portanto, validar seu código é muito importante, mas… é tudo? Quanto à marcação, não há desculpas (mesmo que não esteja semanticamente correto, o que já é bastante depreciado, esteja pelo menos validado!), mas quanto à formatação, nem sempre. Quantas vezes você já não teve que sacrificar seu CSS pra corrigir um bug em um certo browser (em 99,99% dos casos, o IE)? Você fez errado? Vale a pena fazer isso? Claro que vale. É melhor ter seu site apresentável em vários browsers (sites crossbrowser) e não validado, do que ter um site validado, mas que se comporta de uma maneira em um browser e de outra em outro browser. Mas, neste caso, não coloque o selo de validação! Isto é uma anti-propaganda de você mesmo!

Eu, pessoalmente, acredito que há questões muito mais importantes com que um desenvolvedor tenha que se preocupar do que a simplesmente validação (repito, quanto à marcação não há desculpas para a não-validação!). Teste seu site em vários browsers, desabilite as folhas de estilo e teste a acessibilidade, experimente visualizar o site nos diferentes media types que você disponibilizou, rode-o em um leitor de tela para deficientes visuais. Está tudo ok? Parabéns! Validou? Não? Não importa. Publique o site, não coloque selos de validação, e seja feliz! Seus visitantes te agradecem.


<update>
Como leitura complementar, deixo um excelente artigo do Henrique, do Revolução Etc: Validação e Semântica.
</update>

13 Comentários

Arquivado em Artigos, Cotidiano, CSS, Semântica, Web Standards, XHTML

Inaugurando…

Olá a todos que estejam lendo este post (se é que alguém lerá isso aqui).

Estou abrindo este blog com o intuito de trocar informações sobre web em geral. Sou um “consumidor de blogs” assíduo e costumo freqüentar vários blogs que falam princiaplmente sobre Web Standards, XHTML e CSS. Alguns deles estão na seção Links (e no widget Links, na barra lateral) e sugiro que, se não conhece algum, gaste um tempo (ou ganhe) visitando-os.

A idéia de abrir o blog surgiu pelo desejo de trocar experiências e informações com a comunidade desenvolvedora, em especial, os apaixonados por Web Standards (como eu).

Espero, ao longo do tempo, conseguir mais do que atrair um público, mas fazer amizades e continuar blogando, visando sempre a troca de informações, experiências, idéias e pensamentos…

Por enquanto vou ficando por aqui. Um abraço a todos…

2 Comentários

Arquivado em Artigos, Browsers, Cotidiano, CSS, Sem Categoria, Semântica, Tableless, Web Standards, XHTML