A extensão Aardvark para o Firefox foi atualizada e agora funciona no FF 1.5.0.1
Esta extensão juntamente com a extensão WebDeveloper formam meu par preferido como ferramentas de auxílio no desenvolvimento Web.
Trata-se de uma ferramenta que expõe a estrutura de uma página Web aberta no browser revelando os elementos HTML ao simples passar do mouse sobre as diferentes áreas da página
Depois de instalada, clique com botão direito do mouse na página, para abrir o menu de contexto e escolha a opção Start Aardwark ou opcionalmente vá em menu Tools > Start Aardwark e pronto a ferramenta está ativa.
Deslize o mouse sobre a página e cada elemento HTML sob o cursor será cercado por uma borda vermelha formando um retângulo e o tipo de elemento, sua classe ou ID se houver, será revelado no canto inferior esquerdo do retângulo dentro de uma ‘caption’ amarela.
Para desativar a ferramenta tecle ‘Q’ ou F5 (refresh). Ao sair da página a ferramenta é desativada automaticamente.
Uma vez ativada a ferramenta você poderá interagir na página pressionando teclas de atalho cuja função descrevo na tabela abaixo.
Na primeira coluna está indicada a tecla de atalho, na segunda um nome para sua função (em inglês) e na terceira uma breve descrição da ação desempenhada ao se pressionar a tecla.
Notar que a função é exercida sobre o elemento que está em destaque (com o mouse em cima) na página.
| W | Wider | Seleciona a área que contém o elemento em destaque |
|---|---|---|
| N | Narrower | Undo – desfaz o comando “Wider” |
| Q | Quit | Desativa a extensão na página |
| U | Undo | Undo – desfaz os comandos “remove” ou “isolate” |
| R | Remove | Deleta o elemento em destaque da página |
| I | Isolate | Isola o elemento em destaque |
| E | Erase | Remove o conteúdo do elemento em destaque |
| B | Black on white | Coloca uma cor preta para primeiro plano e um fundo branco no elemento em destaque e seu conteúdo |
| C | Colorize | Coloca uma cor de fundo aleatória no elemento em destaque |
| V | View Source | Mostra o código fonte para o elemento em destaque |
| D | “De-widthify” | Remove valores fixos de largura definida para o elemento em destaque e elementos nele contidos |
Aqui o link para blog do autor , onde você poderá fazer o download da ferramenta. Lá você encontra ainda um link para demonstração (o link está no banner azul do blog) do funcionamento da ferramenta. Aconselho a experimentar a demonstração antes de baixar e instalar a extensão.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Essa eu não conheica, a WDT tem a funcionalidade de marcar o elemento atual (Outline Outline Current Element), mas não faz essas outras coisas, como remover o elemento...
Valew pela dica, estou instalando neste exato momento...abços
mauro, restaurando seu post antigo, rodei o demo dessa ferramenta mas não achei suficiente, estava procurando uma que mostrasse o conteudo css do elemento corrente, atualmente estou testando a extensao cssviewer, é muito util, mas nem sempre funciona não sei porque, já testou essa extensao?
Curti essa dupla que vc mencionou! Agora fica mais facil para mim que sou iniciante total.
Ola Farley:
Localize o arquivo index.php no diretório raiz do WP e renomeie para index1.php ou outro nome qualquer a sua escolha.
Nomeie a página que você criou para ser a inicial como index. (a extensão que ela tenha html, shtml, php, asp, jsp...) e coloque no diretório raiz.
O link para a página default inicial vai ser <a href="/index1.php">blog</a>
Maurício, como sempre ÓTIMA dica a sua! Gostei de ver como funciona. Irá inclusive me ajudar a entender melhor o conceito de estrutura dos sites que tenho curiosidade e estudo.
Queria ainda te fazer uma pergunta: Usando o WordPress, vc faz idéia de como colocar uma das páginas criadas para aparecer ao acessar o WP ? Como página inicial sempre aparece o blog. Eu criei uma página que queria que fosse a inicial. Será que pode me ajudar a resolver isso ? Estou na tentativa faz um mês e ainda nada.
Obrigado!