domingo, 6 de abril de 2008

Desenvolvimento Web na tela do Browser

Trabalhar com design de páginas html hunca foi muito meu forte, em parte porque nunca tive muita paciência de ficar criando tags de formatação para cada estrutura do meu site, sem contar que na época, eu usava tabelas, e trabalhar com as mesmas sem um editor como o Dreamweaver era uma árdua tarefa que exigia muita paciência.

No entanto, os tempos mudaram. Hoje há recursos novos (e alguns antigos, mas pouco explorados) que ajudam e muito o desenvolvimento de quem prefere mexer com códigos que com editores "o que você vê é o que tem". E porque não usar o próprio browser para essa tarefa?


Um dos melhores recursos do Firefox é o suporte a plugins. Programadores criativos ao redor do mundo podem criar recursos para o Firefox, que não haviam sido originalmente planejados. E hoje, vamos falar de alguns destes plugins, que possam nos ajudar no desenvolvimento web, sem precisar sair do Browser.

WebDeveloper

Criado por Chris Pederick, o WebDeveloper é um plugin bastante popular que permite executar certas ações sobre as páginas, entre os mais comuns, como desabilitar recursos como javascript e imagens, redimensionar o browser para outras resoluções, fazer validação css, html e xhtml, entre outros. Mas, há também recursos como o CSS Style Highlight, que lhe ajuda a visualizar onde os objetos estão posicionados, com uma linha em volta dos mesmos. Há muitas outras funções no plugin, mas não falaremos de todas.

MeasureIt

Um plugin que é muito simples, mas útil em algumas situações que exigem precisão é o MeasureIt, feito pelo brasileiro Kevin Freitas. Não há muito o que comentar sobre esse plugin, pois o que ele permite fazer é medir áreas na página. Juntando isso com o Outline do WebDeveloper, você tem uma ferramenta bastante robusta para tirar medidas de objetos invisíveis, por exemplo.

ColorZilla

Também um plugin bastante simples, o ColorZilla trás a possibilidade de se copiar uma cor de qualquer parte do browser (incluindo imagens). Este recurso seria simplório, se não viesse com uma das maiores vantagens do mesmo: ele analisa a DOM da página e monta a paleta com todas as cores utilizadas e permite localizar os elementos que utilizam uma cor selecionada. Muito prático não ter que ficar adivinhando as cores da página e onde foram utilizadas.

Aardvark

Um plugin interessante, é essa a descrição que posso dar sobre o Aardvark. O que ele faz é marcar uma linha vermelha em torno de um objeto, e exibir seu tipo, e caso existam, as informações de id e class do mesmo. Esse recurso é parecido com o do WebDeveloper

Firebug

De todos os plugins citados, não haveria muita utilidade para eles, se não pudéssemos editar o código de maneira rápida, com visualização instantânea das alterações. O Firebug essencialmente faz isto, mas tem tantos recursos, que fica difícil citá-las todas aqui. Mas, o motivo de falar do Firebug por último é porque ele suporta que todos os outros plugins possam ser usados em conjunto, para melhorar ainda mais o desenvolvimento. Sem dúvida, é o melhor de todos.

Bom, é uma seleção pequena de plugins, mas que fazem bastante diferença quando você pode usar e já visualizar diretamente no browser, do modo como deve aparecer.

Fica aí uma dica. Um abraço e até um próximo post.