Olá, leitores do Dicas Browser!
Quero iniciar aqui a nossa Quarta do Webmaster. Toda quarta-feira, vamos falar sobre ferramentas de browsers que ajudam blogueiros e administradores a gerenciarem, otimizarem e analisarem as suas páginas na web.
Para começar, gostaria de falar sobre uma ferramenta muito poderosa para você que é webmaster e que usa o navegador Opera: Opera Dragonfly.
O Opera Dragonfly é uma ferramenta para análise de códigos javascript, CSS, HTML e DOM. Essencial para qualquer webmaster encontrar erros no código e corrigi-los.
Para ter uma ideia melhor do que é o Opera Dragon fly, dê uma olhada no vídeo abaixo:
Não é necessário instalar nada. O Opera 11.10 já vem com o Opera Dragonfly instalado e pronto para uso. Sendo assim, com o navegador Opera aberto, combine as teclas Ctrl+Shift+I (Windows e Linux) ou ⌘ + ⌥ + I no Mac.
Se você já usa a Inspeção de elementos do Google Chrome, vai perceber que a interface do Opera Dragonfly é bem parecida com ele.
Vejamos as abas:
Documentos
Nessa aba você tem a disposição dos códigos HTML e, no lado direito, seu respectivo CSS. Observe que se passar o cursor do mouse algum elemnto na página, ele ganha um realce em azul. Clique sobre um elemento da página e o Opera Dragonfly mostra em que parte do HTML ele está e qual é o seu estilo.
Com um duplo clique sobre os valores do CSS à direita, é possível modificá-los por qualquer outro. Isso serve para que se tenha uma ideia de como ficará a mudança que deseja implementar no seu site ou blog.
Scripts
Nessa aba, você tem a informação dos scripts que rodam na página. Quanto mais o seu site fizer uso de scripts, mais será extenso. Não há muito o que analisar nessa parte. Apenas encontrar possíveis erros no código de depuração.
Rede
Esse é um dos mais importantes. Com ele, você vê quais elementos são carregados durante a abertura da página e quanto tempo isso leva. Dá para ter já uma ideia do que tirar de elemento da página para que seu carregamento fique mais rápido.
Recursos
Nessa aba, é informado o elementos que foram encontrados na página, tipo e tamanho. Também pode servir para decidir se um elemento da página é realmente necessário ou não. Combinando as informações da aba Rede com a aba Recursos, dá já para ter uma noção do que fazer.
Armazenamento
Nele aparece a informação de quais são os cookies presentes na página e em quanto tempo eles expiram.
Erros
Acredito que esse é o mais importante. Nele, são mostrados erros relacionados aos códigos CSS e JavaScript. De acordo com ele, faça as alterações devidas para que ele funcione perfeitamente nos navegador e esteja de acordo com os padrões da web.
Utilitários
Esse é um recurso exclusivo da inspeção de elementos do Opera. Com ele, é possível capturar as cores presentes em qualquer elemento na página. Clique no botão Capturar imagem da tela e leve o cursor sobre a imagem gerada. Note que o cursor mudar para o formato de uma cruz. Clique sobre qualquer parte da imagem e será dados as informações da cor daquele elemento em RGB, HSL ou HEX.
Conclusão
O Opera Dragonfly é uma ferramenta poderosa para inspeção de elementos de sua página. Se você é um webmaster, recomendo desde já a sua utilização para otimização de seu site.
Faça bom uso!
Veja também outras dicas para webmasters:
- Escreva seus posts com ScribeFire
- IE 9 – guia para desenvolvedores
- Um aviso que desvaloriza seu site
- Carregue seu blog mais rápido – Blogger
- Imagens com cores mais vivas no Firefox
23 anos, técnico em informática, designer e compositor. Gosta muito da área de tecnologia e usuário Linux (Ubuntu e Fedora) sem ser um defensor ferrenho da plataforma. Apaixonado por browsers (navegadores) querendo saber de todas as suas funções e recursos disponíveis.
Marco Damaceno tem 638 artigos publicados no Dicas Browser.
