Inspeccionar/Editar Elementos num Blogue/Site

Estava pensando em algo para publicar por aqui e lembrei-me de algumas pessoas que me têm pedido ajuda para personalizar uma ou outra parte dos respectivos blogues não fazem a mínima ideia de como identificar o elemento para o qual me pedem ajuda.

Com isso em mente, achei que seria boa ideia dar a conhecer algumas das ferramentas que utilizo ao editar ou criar um template e que acho das mais úteis. :)

Qualquer uma das opções demonstradas nas imagens a seguir fazem praticamente a mesma coisa, embora a minha preferida seja a ultima porque me permite acrescentar elementos ao HTML e editar/acrescentar os estilos no CSS mais facilmente para mim.

No entanto convém notar que estas ferramentas são somente para testar como fica determinado elemento e que depois de acertarmos com a aparência pretendida, devemos copiar os estilos do CSS para o seu local apropriado no CSS do blogue e claro, não esquecer que algumas definições de estilos precisam da definição própria para cada navegador.

Para anular os resultados testados com estas ferramentas, basta recarregar/actualizar a página.

Abaixo estão algumas imagens dos alguns dos navegadores que mais utilizo e respectiva ferramenta, utilizando como exemplo um artigo no meu antigo blogue e o elemento das etiquetas/marcadores abaixo do titulo:

Chrome

Opera

Firefox com Firebug

OK, não vou entrar em detalhes para cada navegador já que basicamente funcionam de maneira similar com poucas alterações entre si, por isso vou só falar do Firebug, que é uma extensão para o Firefox e que podem instalar da ligação acima ou através dos Extras para o Firefox.

O Firebug foi descontinuado e já não está mais em desenvolvimento/actualização. Embora continue a ser a minha ferramenta favorita no design de sites/blogues e possa continuar a ser utilizada, agora é recomendado que se utilize as Ferramentas de Desenvolvimento incluídas no Firefox que dizem já trazer aspectos do próprio Firebug.

Depois de instalado, basta clicar com o botão direito do rato no elemento a inspeccionar tal como demonstrado nas primeiras imagens dos grupos acima e aparece abaixo do ecrã a secção correspondente ao HTML (à esquerda) e ao CSS (os estilos, à direita).

Por acaso, nunca testei acrescentar elementos HTML no Chrome e Opera mas no Firefox frequentemente o faço quando estou criando algo no blogue e é muito fácil e intuitivo. No entanto e tal como para a parte em CSS, devem ter algum conhecimento do que estão fazendo.

Basta fazerem uma pesquisa na Net que existem vários tutoriais sobre esses assuntos mas para uma pequena introdução, recomendo que leiam:

1. HTML
2. CSS

Como acrescentar elementos na parte HTML pode ser complicado para iniciantes, não vou aqui falar disso porque mesmo eu raramente o faço. Já para editar o CSS, depois dos passos acima descritos para abrir o FireBug, identificamos na parte HTML (à esquerda) o elemento onde pretendemos testar novos estilos. Depois na parte do CSS (à direita), clicamos com o botão direito do rato e escolhemos Inspeccionar no Painel CSS. Então aparece todos os estilos estilos presentes na pagina, com destaque nos estilos do elemento em causa e onde podemos alterar conforme quisermos.

Todas as alterações serão visíveis na pagina à medida que as vamos alterando e quando estarem conforme desejamos basta copiar os novos estilos para o Bloco de Notas, acrescentar os estilos específicos para os diferentes navegadores se necessário e depois em Editar HTML do blogue, procurar onde estão os estilos que vamos alterar e substituir pelos estilos que copiamos e editamos no Bloco de Notas.

Como sempre, recomendo extremo cuidado ao mexer no HTML do blogue e é saudável e obrigatório fazer Backup do template antes de qualquer alteração em Editar HTML, por muito pequena que seja.

Espero ter ajudado alguém com esta pequena introdução a estas ferramentas. :)

Até Breve. :-F

Queres ler outro artigo ao calhas?