Com o fire bug você consegue ver como ficaria determinado elemento na página se no css tivesse tal elemento ou se tivesso um pixel a mais, etc. Também é possível, Verificar o comportamento da rede nas requisições, o que acontece quando determinado evento em Ajax é acionado, assim como as variáveis e a resposta deste AJAX. É possível aumenta a quantidade de caracteres em determinado texto para verificar o comportamento do elemento, tudo em tempo real e de maneira que ao atualizar a página tudo volta ao normal.

A baixo tentarei descrever um pequeno tutorial sobre o “amigo” FireBug.

O primeiro passo, é instalá-lo no seu firefox.

O link.

Uma vez instalado, você deverá reiniciar seu Firefox e em seguida o complemento estará pronto para o uso.

Vamos lá.

Se vocês repararem, na barra de status deve estar aparecendo uma baratinha como esta.

Isso quer dizer que seu complemento está apto para o uso. Há duas maneiras de s acionar o complemto, uma é clicando em cima da baratinha e outra é apertando F12 (uso mais)

Uma vez que vocês estão no meu blog (www.leandrogarcia.com/blog), você apretem a tecla f12 que abriá um console do firebug.

Você deve ter percebido que há algumas abas.

Console, HTML, CSS, SCRIPT DOM e Rede. No meu Caso Também o YSLOW, que é um complemento do complemento digamos assim.

Vou explicar cada aba individualmente.

Console.

A primeira coisa a fazer é habilitar a aba. Clique na seta e depois Habilitado.

Agora já podemos usar a aba.

No meu blog como não tem ajax rolando, não é possível vê-lo em ação. Vamos acessar um outro site ver o que acontece, digamos o placar do iG http://app.esporte.ig.com.br/temporeal/home.php?campeonato=1

Se você esperar alguns segundos, verá que surgirão algumas linhas nesta área.

Cada linha dessas é uma requisição que a página faz via ajax. Se voc~e clicar al qualquer uma dessas linhas verá que será aberto uma nova página que é a requisição.

Clique no icone + de qualquer uma das linhas e se abrirá alguns dados.

Quando se abre os dados, há mais quatro novas abas. Parâmetro (isso cajo haja algum parâmetro), Cabeçalhos, Resposta e HTML.

Parâmetro, exibe todos os parâmetro que você envia na requisição. nela você poderá verificar ´se a aplicaçãoe stá enviando algum parâmetro errado na requisição.

Cabeçalhos

Toda requisição gera um cabeçalho, com o Firebug você consegue vê-lo.

Resposta, é o que o servidor devolve na requisição, pode ser XML, html, variável, JSON, etc.

HTML, no caso o que o browser recebe já interpretado.

No caso de uma requisição via Método POST, você verá uma aba POSTAR, que traz os dados da postagem como parâmetros.

HTML

Nessa aba é onde você consegue alterar o layout da página para fazer testes. Consegue editar determinado elemento e ver o comportamento do mesmo, alterar textos e verificar como ficam, etc.

As possíbilidades são imensas, uma vez que aprenderem a usar, duvido que deixarão de usá-lo.

A maneira mais comum, é enviar a página para um servidor e validá-la no site do w3c, porém isso demanda muito tempo, coisa que cada vez temos menos. Para agilizar este processo, foi desenvolvido, já a alghum tempo, um complemento para o firefox, denominado “HTML Validator”.

O Html Validator, depois de instalado, verifica para você todas as páginas que você acessa, sem a necessidade de acessar o site da W3c, o algoritimo utilizado lê o código HTML e da a informação da validação. Essa informação é mostrada através de um icone que fica na parte inferior direita do navegador.

Ao clicar duas vezes no ícone, é exibido o códico finte da página e na parte de baixo, uma área dizendo onde está o erro e uma outra dizendo o que é o erro.

Se você ainda não o usa, clique no link abaixo e o instale, você verá como facilita nossas vidas.

https://addons.mozilla.org/pt-BR/firefox/addon/249

No mundo atual, as pessoas tem cada vez menos tempo e paciência para esperar por alguma coisa, muito menos se o que devem esperar é uma página ser carregada. Motivo este pelo qual nós, desenvolvedores para internet, devemos pensar na praticidade e velocidade que a página é carregada pelo usuário.

Existem algumas práticas que podem fazer com que seu código mais rapidamente carregado:

Diminua a quantidade de requisições http.

Em cada requisição que um site faz ao servidor, seja qual for (CSS, JS, Imaem, etc), há um trafego de informações, ou seja, sua página envia uma requisição e depois recebe a resposta do servidor, quanto menos requisições você fizer, menor será esse trafego, logo, mais rápido seu site carregará;

Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post.

Utilizar o menor número possível de arquivos CSSs, O ideal é usar apenas um, eventualmente um segundo, mas evitar o terceiro, o quarto a todo custo.

Se possível utilizar apenas um arquivo JS.

Cachear a página ou Header Expires

A inconveniência deste é que ele é server-side, ou seja, é feita através do servidor, mas serve para guardar na memória do usuário os arquivos das páginas que ele visitou, ou seja, um re-acesso ao site seria bem mais rápido.

Compressão de componentes (Gzip Components)

Esta é uma outra técnica de redução server-side. Com ela, o servidor entende que deve comprimir (ou “zipar”) os código, os CSSs os JSs e, inclusive o HTML.

Colocar as folhas de estilo no Header

Uma outra maneira eficaz de ganhar tempo no carregamento das páginas é, além de usar uma única folha de estilos, chamá-la de um arquivo externo e através da tag link posicionada dentro do header

Colocar os Scripts na parte inferior

O ideal é colocar os scripts logo antes da tag </body>, pois desta a página é carregada mais rapidamente. Quando o script está no header, a página primeiro carrega o script depois as demais informações, agora quando esle está posicionado abaixo, a página tem toda a informação carregado e só após isso os scripts são carregados.

Evite expressões em CSSs

Embora existam, as expressões em CSS não são a maneira mais eficaz de criar o seu layout, pois exigem demasiado tempo para serem entendidas pelos navegadores.

ex. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Folhas de Estilo (CSS) e Scripts (JS) externo

Evite colocar estilos e scripts em qualquer lugar no HTML, prefira sempre chama-los através de um arquivo externo. CSSs e JSs, são geralmente caheados pelo browser, o que significa que em uma próxima vista o usuário já terá esses arquivos preveamente carregados.

Otimize seus CSSs e JSs.

Quanto menor for seus códigos, menor tamanho eles terão, logo, mais rápido serão carregado.

Neste link, eu escrevi como se pode otimizar os códigos CSSs

Evite redirecionamentos

Evite ao máximo que suas páginas redirecionem para uma outra, pois desta maneira seu usuário terá que carregar duas ou mais páginas ao invés de uma.

Remova scripts duplicados

Remova todos os scripts duplicados, afinal, não há a necessidade de se carregar duas vezes a mesma coisa.

Reduza o número de DOMs

Reduza ao máximo as “firulas” via DOM do seu código.

Iframes

Se necesário for utilizá-los, utilize o menos possível, pois um ifram,e é uma outra página a ser carregada.

Escolha <link> ao invés de @import

Há duas maneiras de se carregar uma folha de estilo externa, através das tags <link> e @import. Prefira sempre a <link>, pois o @import se comporta da mesma maneira como se você colocasse o <link> lá embaixo.

E tem várias outras maneiras.

O Yahoo, disponibiliza um link onde eles explicam maneiras de se melhorar a performance. Além dessas que eu listei acima, há algumas outras. O line é este.

Como verificar como está  o carregamento de meu site?

Não sei dizer quantas maneiras há para se fazer isso, a única que eu conheço, e acredito que a mais eficaz, é o YSLOW (Uái islou)  (Porque está devagar).

O YSLOW, é um complemento para o Firefox que pode ser encontrado neste link.

No Próximo Post eu vou explicar como funciona o Yslow.

Recebi via e-mail esta semana um complemento a ser adicionado no firefox, trata-se de adicionar um novo item ao campo de pesquisas, o Regsitro.br.

O bacana disso é, nós, que podemos pesquisar a disponibilidade de dominioss .br da mesma maneira que já efetuamos pesquisas no Google. é bem interessante e agiluiza um pouco nossa vida.

Para instalá-lo, você deve:

Abrir o Fire fox, em seguida insira o seguinte comando na barra de endereços

javascript:window.sidebar.

Para iniciar esta nova categoria, resolvi escrever sobre o FireFTP.

O FireFTP é um complemento bem útil que você pode instalar dentro de seu firefox. Como o prórpio nome ja diz, se trata de um complemento onde você consegue acessar, baixar ou efetuar o upload de arquivos via FTP.

Este complemento me acompanha desde o Firefox 1.5. É sempre atualizado vizando funcionar na versão atual do firefox.

É bem simples de ser utilizado.

Uma vez instalado, o complemento estará disponível dentro do menu ferramentas ou Tools.

Ao abrí-lo, você terá no canto superior esquerdo um selectbox onde você pode escolher a conta de FTP cadastrada que você quiser. Caso não haja qualquer conta, você clicar no select e depois em “Creat a new acount”. Insira os dados, Nome da conta, Host, Usuário e Senha. Após isso salve.

Agora você pode escolher essa conta.

Depois clique em conectar e faça a transferência dos arquivos que você precisar.

Abaixo o link para a página de Download

https://addons.mozilla.org/pt-BR/firefox/addon/684