Ferramentas

Como notado no artigo anterior, existe um certo custo inicial na utilização dos padrões Web. Este custo procede primariamente da curva de aprendizado desses padrões que pode ser um tanto íngreme no começo, especialmente no que tange à mudança de hábitos de desenvolvimento necessária para lidar com os mesmos. Adicionalmente, existe a questão das diferenças entre as implementações dos padrões nos vários navegadores em uso atualmente que também podem complicar um pouco a vida do desenvolvedor. Essas dificuldades, entretanto, são mais do que compensadas pelos benefícios da utilização dos padrões mencionadas também no artigo anterior.

O efeito prático das diferenças de implementação é a necessidade, por parte do desenvolvedor Web, de testar escrupulosamente os sites que construir no maior número possível de navegadores de modo a eliminar eventuais problemas na utilização e visualização desses sites em condições mais problemáticas, como é o caso de alguns navegadores com um suporte extremamente limitado aos padrões.

Este artigo, então, apresenta algumas ferramentas necessárias para ajudar o desenvolvedor a fazer esses testes e também mostra outras ferramentas adicionais que podem ser muito úteis para qualquer desenvolvedor Web, seja este um profissional da área ou não. Essas ferramentas auxiliarão o desenvolvedor tanto no começo da utilização dos padrões, possibilitando um entendimento mais fácil e mais rápido dos mesmos, como também no futuro, simplicando várias etapas da construção dos sites mesmo para desenvolvedores já experimentados.

Navegadores

A primeira necessidade para um desenvolvedor que queira utilizar bem os padrões é contar com vários navegadores para o teste de documentos Web criados. Mesmo para um site simples pessoal é impossível assegurar a correta visualização dos documentos nas diversas plataformas sem testes mínimos nos navegadores mais comuns da atualidade. Um receita certa para complicar a vida de qualquer desenvolvedor é testar um site somente no navegador dominante de hoje, o Internet Explorer, já que, mesmo entre versões desse navegador existem algumas diferenças e problemas no suporte aos padrões que podem causar determinadas falhas em um site. Pode parecer um trabalho adicional, mas é uma necessidade que já existe independentemente da aplicação dos padrões. Os padrões, na verdade, simplificam os testes já que produzem um código mais simples e resumido, com menor possibilidades de erro. Além disso, acostumando-se ao uso dos mesmos o desenvolvedor tenderá a acertar mais facilmente na implementação, reduzindo assim o tempo de criação dos sites.

Atualmente, na minha opinião, um site precisa ser testado pelo menos nas seguintes plataformas:

Mozilla 1.x

Esta plataforma abrange os navegadores Mozilla 1.x no Windows, Linux e Macintosh; o Mozilla Firebird nesses mesmos sistemas; o Netscape 6 e 7, também nesses sistemas; o Galeon sob o Linux e alguns outros navegadores em diversas plataformas que fazem uso do Gecko, o renderizador HTML do Mozilla, para exibição de HTML. Note que eu estou ignorando o Netscape 4. Esse navegador já tem seis anos de idade e já está mais que na hora de aposentá-lo. Além disso, é possível criar sites que degradem graciosamente (esse conceito será explicado melhor mais à frente) de modo a serem usáveis no mesmo.

Internet 5.x e 6.0

Essas são as duas versões mais comuns do Internet Explorer. A versão 4.0, que também existe há seis anos, está caindo no desuso, com exceção de algumas organizações padronizadas sob a plataforma.

Opera 6 e 7

Embora possua uma fatia de mercado muito pequena, o Opera possui um suporte muito bom aos padrões e serve como um teste para a correta implementação dos mesmos. Além disso é um dos mais compactos navegadores existentes.

KHTML

Na verdade, o KHTML é o mecanismo de rederização por trás do Konqueror no Linux e do Safari no Macintosh. Embora seja mais difícil testar sob o mesmo, principalmente no caso de desenvolvedores que não têm acesso direto aos sistemas operacionais onde o mesmo é usado, as diferenças na implementação CSS do KHTML são suficientes para exigir uma verificação.

Lynx

O Lynx é um navegador de modo texto usado basicamente no Linux. Ele serve com um teste para a utilização do site sob condições extremas como em terminais, leitores Braille e sintetizadores de fala. Existe um versão do Lynx para Windows que pode ser baixada pelos usuários desse sistema operacional.

Como exceção do KHTML, todos os outros navegadores podem ser facilmente baixados para o Windows.No caso do Mozilla, não há a necessidade de baixar a aplicação completa; basta baixar o Mozilla Firebird que é uma versão mais leve do componente navegador do projeto. Através da mesma o desenvolvedor pode testar a visualização de um documento verificando como ele será exibido tanto no Windows como no Linux e Macintosh. Existem apenas algumas pequenas diferenças que serão tratadas mais tarde. O suporte aos padrões no Mozilla é o melhor do mercado, atualmente, e serve como uma referência para os demais navegadores.

O versão 6 do Internet Explorer é a última que será desenvolvida como um componente separado do Windows. As próximas versões serão integradas ao mesmo e só poderão ser adquiridas através do upgrade do sistema operacional. Isso significa que pelos próximos cinco a seis anos será necessário testar sites nesse navegador até que a adoção de uma nova versão do Windows esteja suficientemente completa.

Para desenvolvedores profissionais, eu recomendo a utilização do VMWare. Esse produto permite que o seu usuário crie "máquinas virtuais" de sistemas operacionais baseados nos processadores Intel e as execute no seu sistema sem que as mesmas interfiram em qualquer processo do mesmo. Assim o usuário pode criar combinações como Internet Explorer 5.5 no Windows 98, Mozilla no Linux e dezenas de outros para testes rápidos. Isso elimina os custos de manter várias máquinas reais com as combinações necessárias e também a necessidade de formatar e instalar uma nova máquina sempre que uma combinação extra se faz precisa.

Ferramentas adicionais

Além de ser um excelente navegador, o Mozilla possui uma estrutura muito flexível que permite a criação de extensões para o mesmo. Algumas dessas extensões são ferramentas que podem auxiliar o desenvolvedor na criação de sites conformantes com os padrões Web. Infelizmente, essas extensões são somente para este navegador, ou para o Mozilla Firebird, e nenhuma delas existe gratuitamente para o Internet Explorer. É possível encontrar alguns equivalentes comerciais das mesmas para o mesmo, mas essas não são tratadas aqui.

Algumas dessas extensões úteis são:

Checky

Esta extensão cria um ítem de menu adicional no Mozilla que permite a submissão de um documento para diversos serviços de validação dos padrões Web. A validação é o processo de verificação de um documento contra um padrão de modo a determinar se o documento conforma-se à especificação do mesmo. Em relação ao tema que estes artigos estão tratando, as validações mais importantes são as de HTML (ou XHTML), CSS e acessibilidade. O Checky provê acesso a vários validadores desses padrões específicos e a dezenas de outros de interesse para desenvolvedores Web.

PNH Toolbar

Esta extensão cria uma barra de ferramentas adicional no Mozilla com várias funções úteis para o desenvolvedor. Estas funções incluem links diretos para os textos das especificações de alguns padrões e outros documentos de interesse para o desenvolvedor, acesso a alguns serviços de validação e comandos para testes no layout de um documento Web. Um desses comandos, de especial nota para o desenvolvimento CSS, permite a visualização dos blocos que compõem um documento facilitando o teste e a correção de erros na implementação visual do mesmo.

LiveHTTPHeaders

Embora não esteja diretamente relacionado aos padrões que estamos tratando aqui essa ferramenta permite verificar os headers trocados entre o Mozilla e servidores de modo a facilitar a detecção de erros -- especialmente em páginas dinâmicas que criam seus próprios headers.

Além dessas extensões o Mozilla ainda conta com um poderoso depurador JavaScript que ajuda enormemente a tarefa de testar a programação cliente de páginas. O Mozilla possui também um visualizador DOM quer permite verificar facilmente a estrutura de uma página e identificar os elementos que a compõem. Essas função é similar à da PNH Toolbar.

Bookmarklets

Embora as extensões acima só existam sob o Mozilla existe uma outra classe de ferramentas que são de interesse para o programador Web: os bookmarklets. Essas ferramentas são uma classe especial de bookmarks que, ao invés de apontarem para documentos Web, implementam funções JavaScript com propósitos específicos. Um exemplo são os bookmarklets para a criação de entradas no MovableType, uma ferramenta para blogs. Esses bookmarklets permitem que o usuário do MovableType selecione texto em um documento Web de seu interesse e, ao clicar o bookmarklet, invoque uma rotina que automaticamente cria uma entrada no seu blog e insere o texto previamente selecionado, com seu endereço, permitindo então a edição da entrada. Isso poupa vários passos para o usuário, facilitando o uso dessa aplicação específica.

No caso do desenvolvimento Web os bookmarklets podem implementar funções de apoio à implementação e teste de um documento. Para um exemplo de um bookmarklet, clique o link abaixo:

Editar estilos deste documento.

O bookmarklet acima invoca um micro-editor CSS que permite que os estilos do documento atual sejam alterados. Isso ajuda a testar modificações no mesmo antes que haja qualquer esforço de codificação. Como é possível ver pela execução desse bookmarklet, eles são ferramentas muito poderosas e úteis para o desenvolvedor. Com o bookmarklet acima é possível, por exemplo, refazer um site visualmente e só depois implementar as mudanças. Obviamente, para que isso funcione o site já deve estar implementado sob os padrões Web no que concerne à sua estrutura.

Como o próprio nome diz, os bookmarklets podem ser guardados nas listas de bookmarks de um navegador. Para isso, arraste os links de bookmarklets que encontrar para os menus ou barras de bookmarks do seu navegador específico, ou use a opção equivalente no menu contextual invocado com o botão direito do mouse.

Para mais bookmarklets, consulte os sites abaixo:

Mantenha em mente que alguns bookmarklets funcionam em versões específicas de alguns navegadores. Uma boa parte dos mesmos, porém, funciona sem modificação tanto no Mozilla com no Internet Explorer.

Conclusão

As ferramentas mencionadas acima podem ajudar tanto desenvolvedores começando na utilização dos padrões Web como os já experimentados nos mesmos. Outras ferramentas interessantes serão mencionadas em artigos futuros.

No próximo texto finalmente entraremos na parte prática aprendendo com utilizar adequadamente o padrão HTML.

Quaisquer comentários, dúvidas, correções, sugestões ou adições poder ser encaminhados para o email mtblog@reflectivesurface.com, ou, no caso desse artigo específico, comentados na entrada correspondente em meu weblog.