Um pouco confuso, não? Pois é, eu lembro que também achava isso estranho no início... "como diabos vou encaixar isso no layout?" eu pensava. Para começar a clarear as idéias, vamos ver o motivo, razão ou circunstância porque devemos utilizar esta técnica.

Pense na seguinte situação: você fez um layout com ícones. Ohh, legal... ícones, adoro! E como você não usa CSS Sprites, cada ícone fica num arquivo separado. São um total de 26 ícones, que deixam seu menu mais buniteenho... e também precisam de 26 HTTP Requests. Este é o principal problema em não usar CSS Sprites, a quantidade exagerada de requisições HTTP que o browser precisa fazer para baixar todas as imagens.

Cada HTTP Request significa uma nova conexão e um novo pedido ao servidor. E isto leva algum tempo, além de gastar uma quantidade maior de dados. Digamos que a cada requisição, sejam gastos 0.2 segundos. Multiplique isto pela quantidade de imagens e temos um bom tempo de carregamento desperdiçado. Por isso, juntar todas as imagens num único arquivo é a maneira mais eficaz de reduzir essas requisições e acelerar o carregamento das páginas.

Compreendido os motivos para usar essa técnica, vamos entender seu funcionamento.

Tomando novamente como exemplo a primeira imagem, vamos ver como exibir somente o ícone do Facebook num elemento e o do Twitter em outro:

- CSS:

/* Todas as divs com essa classe receberão a imagem do sprite como background */
.sprite_img{
    background: url(sprites.png) no-repeat;
}
.icone_facebook{
    /* O grande segredo, a propriedade background-position */
    background-position: -32px -25px;
    width: 32px;
    height: 32px;
}
.icone_twitter{
    background-position: 0 -25px;
    width: 32px;
    height: 32px;
}

- HTML:

<div class="sprite_img icone_facebook"></div>
<div class="sprite_img icone_twitter"></div>

E o resultado...

O grande segredo desta técnica é a propriedade CSS background-position, que posiciona a imagem conforme as coordenadas. Para entender como funciona a propriedade background-position, veja a imagem abaixo:

As linhas na cor verde representam a borda da imagem (as coordenadas 0, 0). As linhas na cor laranja representam a DIV do exemplo, que possui altura e largura de 32px.

O exemplo acima serve pra elementos com largura fixa. Qualquer alteração no tamanho pode *oder tudo e deixar o layout bugado.

Para elementos com largura ou altura variável, a coisa muda um pouco. Você precisa posicionar os elementos verticalmente ou horizontalmente, além de deixar uma pequena margem entre eles. Veja o próximo exemplo, com alguns ícones que serão posicionados em elementos com altura fixa, mas largura variável.

A imagem que utilizaremos:

- CSS:

.icones{
    background: url(sprites.png) no-repeat;
    line-height: 32px;
    padding-left: 35px;
    display: inline-block;
    margin-right: 10px;
}
.icone_google{
    background-position: 0 -32px;
}
.icone_flickr{
    background-position: 0 -64px;
}
.icone_twitter{
    background-position: 0 -96px;
}
.icone_rss{
    background-position: 0 -128px;
}

- HTML:

<a href="#" class="icones icone_twitter">Twitter</a>
<a href="#" class="icones icone_flickr">Flickr</a>
<a href="#" class="icones icone_google">Google</a>
<a href="#" class="icones icone_rss">Feed RSS</a>

Resultado:

Para imagens com largura e altura variável, não tem jeito. Só usando imagens em arquivos separados mesmo. Nos outros casos, onde você pode usar CSS Sprites, a dica é: USE.

Ferramentas:

Geradores online, que podem auxiliar na tarefa de gerar os sprites.

• Spritr
• Sprite Creator 1.0
• CSS Sprites Generator
• Project Fondue CSS Sprite Generator

Artigos sobre o assunto:

Uma pequena compilação de artigos que falam sobre os CSS Sprites, como utilizar e dão mais alguns exemplos.

• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprite - Artigo no iMasters
• Usando CSS Sprites para fazer seu site carregar mais rápido
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Até a próxima!

Basicamente, ela remove o elemento da árvore DOM e armazena numa variável, possibilitando o uso posterior da mesma. Se você é um jQuery modafoca, me perguntará... e a função remove(), não faz o mesmo? Nop, a função remove funciona de maneira diferente.

A função remove simplesmente remove (ohhh) o elemento, e suas referências. Ele é apagado, sem dó nem piedade. Já a nova função detach somente remove o elemento da árvore, sem remover a referência. É como recortar o elemento, e depois possibilitar que ele seja colado em outro lugar do código.

Veja um exemplo onde utilizamos a função remove:

$('.minha_div').click(function(){
    $(this).remove();
});

No exemplo acima, a div é apagada e removida da DOM. Agora, vejamos um exemplo com detach:

var elemento;
$('.detach_minha_div').click(function(){
    if(!elemento){
        elemento = $('.minha_div2').detach();
    }else{
        elemento.appendTo('.div_container');
        elemento = null;
    }
});

Attach/detach minha div

Agora, recriar elementos é para os fracos.

Até o próximo (e último) artigo da série.

define('WP_ALLOW_REPAIR',true);

Depois de adicionar a linha, abra a seguinte página em seu navegador: http://URL_DO_SEU_BLOG/wp-admin/maint/repair.php

Faça a otimização e depois remova a linha, para evitar que usuários não desejados tenham acesso à página. :)

A função delay serve para atrasar a queue (fila) de animações. Com essa função, você não precisa fazer uso de callbacks e chamadas setTimeout. As coisas ficam bem mais simples agora, veja o exemplo abaixo:

$('.minha_div').click(function(){
    $(this)
        .animate({ // Animação que será executada logo após o clique
            paddingTop:50,
            paddingBottom:50,
            margin:50
        },500)
        .delay(2000) // Delay (espera) de 2 segundos
        .animate({ // Animação que será executada ao término do delay
            paddingTop:10,
            paddingBottom:10,
            margin:0
        },500);
});

Clique

Viu só como é fácil? Antes você precisava criar diversas funções de callback para uma simples animação... agora chega disso, viva a função delay!

Leia mais sobre a função delay na documentação da API do jQuery.

O plugin (ou extensão, whatever) serve para encurtar URLs usando o Zapt.in - pausa para o Ohhh. E tem um botão "Copiar". É isso.

Instalação

1. Primeiro, vá até o diretório de extensões do Google Chrome e instale o plugin:
   
2. Agora o ícone do Zapt.in vai aparecer no canto superior direito do Chrome. Clique nele e depois em "Configurar":
   
3. Agora você precisa da sua chave da API do Zapt.in. Pegue a sua, preencha os campos e clique em salvar:
   
4. Pronto! Agora todos os links encurtados com o plugin vão aparecer na sua conta do Zapt.in.
   

Todo o código fonte do plugin (extensão, add-on... sei lá) está disponível num repositório do Github. Então, se você é desenvolvedor e deseja contribuir com alguma funcionalidade extra (como um "enviar para o Twitter" #ficadica), basta criar um fork, fazer suas modificações e depois enviar um "Pull Request" pra mim.

Inicialmente o plugin era pra uso pessoal, não tinha intenção de compartilhar com as massas. Mas como o Chrome 4 final foi liberado há dois dias (e com suporte oficial a plugins), pensei: porque não?

Diferentemente do focus, o evento focusin é disparado quando qualquer elemento dentro do elemento pai recebe foco. Para entender melhor:

$('.focusin').focusin(function(){
    $(this).css('background','blue');
}).focusout(function(){
    $(this).css('background','red');
});
$('.focus').focus(function(){
    $(this).css('background','blue');
}).blur(function(){
    $(this).css('background','red');
});

Legal, né?

Eu, particularmente, sentia falta desses dois eventos. Principalmente pra mudar a cor de formulários, etc quando o usuário "focava" em inputs... antes era necessário fazer um loop e aplicar o evento a cada input dentro do formulário, agora ficou muito mais simples.

Leia mais sobre o focusin e focusout na documentação da API do jQuery.

E no primeiro artigo, uma dica simples porém muito eficaz pra melhorar seu SEO: títulos das postagens com H1 único. Como assim? Calma, vou explicar...

A maioria dos temas pra WordPress utiliza uma tag H1 no header, com o nome do blog e um link para a home. Veja na imagem um exemplo, com o tema padrão do WP:

Como podemos observar, em todas as páginas a tag H1 será "ocupada" com o título do blog. E o título dos posts acaba ficando com a tag H2.

No HTML, a tag H1 representa o título de mais alta importância na página. E é dessa forma que os buscadores (Google e afins) interpretam. Ou seja, se colocarmos a tag H1 no header com o título do blog, é ele quem "ganha" a importância.

Minha dica é mudar isso, colocar a tag H1 somente no título das postagens. Veja como a estrutura ficaria depois da otimização:

Tendo como base o tema padrão, a otimização pode ser feita da seguinte forma:

1. Abra o arquivo header.php e procure pelas linhas de código referentes ao header do seu blog:

   <div id="header" role="banner">
       <div id="headerimg">
           <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
           <div class="description"><?php bloginfo('description'); ?></div>
       </div>
   </div>

2. Substitua por:

   <div id="header" role="banner">
       <div id="headerimg">
           <?php echo is_single()? '<div id="blogtitle">' : '<h1 id="blogtitle">' ; ?>
               <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
           <?php echo is_single()? '</div>' : '</h1>' ; ?>
           <div class="description"><?php bloginfo('description'); ?></div>
       </div>
   </div>

3. E no arquivo single.php, mude a tag H2 por H1. Procure por:

   <h2><?php the_title(); ?></h2>

4. Substitua por:

   <h1><?php the_title(); ?></h1>

Com essa pequena alteração todas as sua páginas "simples", ou seja, todos os seus posts terão tags H1 no título. E no restante das páginas, o H1 continuará no header com o nome do blog.

Nota: É importante lembrar que a estrutura varia muito de tema pra tema. E lembre-se de consertar seu CSS depois das mudanças.

Instalando o Xdebug no PHP

1. Primeiro, faça download do arquivo .dll do Xdebug, de acordo com sua versão do PHP.
2. Coloque a DLL dentro do diretório /ext, que deve ficar dentro do diretório de instalação do PHP. Caso você use o EasyPHP, o diretório é C:\Program Files\EasyPHP[VERSÃO]\php\ext.
3. Abra seu php.ini para edição. Agora insira as seguintes linhas no final do arquivo:

   [XDebug]
   zend_extension="C:\Program Files\EasyPHP[VERSÃO]\php\ext\php_xdebug-VERSÃO_DO_XDEBUG.dll"
   xdebug.remote_enable=1
   xdebug.remote_host=127.0.0.1
   xdebug.remote_port=9000
   xdebug.remote_handler=dbgp
   xdebug.profiler_enable=1
   xdebug.profiler_output_dir="c:\WEB\xdebug"

   Note que você precisa editar as linhas de acordo com a sua configuração.

4. Reinicie o Apache.
5. Agora rode um phpinfo(). No caso do EasyPHP, abra em seu navegador o endereço http://localhost/home/phpinfo.php.
6. Se tudo estiver certo, o phpinfo deve exibir uma categoria com as configurações do Xdebug.

Dica: Caso você não tenha sucesso na primeira tentativa, tente outra DLL.

Outra dica: Antes de instalar, você pode rodar um phpinfo() e verificar com qual compilador seu PHP foi construido. O EasyPHP com PHP 5.3 usa o MSVC6, logo o Xdebug deve ser 5.3 VC6.

Configurando o Netbeans para usar o Xdebug

No Netbeans, vá em Ferramentas > Opções > PHP > Geral. Agora, em Linha de comando, digite o caminho do interpretador PHP. Se você usa o EasyPHP, o caminho deve ser C:\Program Files\EasyPHP5.3.0\php\php.exe.

Certifique-se também que em Depuração > Porta do depurador está configurado a mesma porta setada no php.ini. No nosso caso, a porta 9000.

Reinicie o servidor Apache e pronto, XDebug e Netbeans pronto para uso. Em breve farei alguns artigos demonstrando qual a utilidade do debugging, como fazer, e algumas técnicas interessantes para testes.

E não deixe de ler o artigo Debugging PHP Source Code in the NetBeans IDE (em inglês), que explica como funciona o debug built-in do Netbeans.

PHP, Apache, MySQL e PHPMyAdmin = EasyPHP

Nada de Wamp, Xampp, ou qualquer outro. Bom mesmo é o EasyPHP (na minha opinião, é claro). Baixe-o, instale e vamos fazer alguns ajustes:

Configure o EasyPHP para sempre executar como administrador

Se você usa o Vista (morra) ou o Windows 7, você precisa executar o EasyPHP como administrador. Caso contrário ele não irá funcionar corretamente.

Para isso, clique com o botão direito no atalho do EasyPHP. Em Propriedades, vá até a aba Compatibilidade e clique em Alterar as configurações de todos os usuários, deve aparecer uma nova janela. Em Nível de privilégio, marque Executar este programa como administrador. Clique em Ok e Ok novamente.

Ativar algumas extensões do PHP

Edite o arquivo php.ini, que - numa instalação padrão - fica em C:\Program Files\EasyPHP[VERSÃO]\conf_files e descomente as seguintes linhas:

• extension=php_gettext.dll - Extensão do Gettext, útil para l10n (Internacionalização)
• extension=php_pdo_mysql.dll - Driver do PDO que oferece suporte ao MySQL
• UPDATE: Descomente também a linha extension=php_curl.dll, que dá suporte ao cURL

Procure também pela short_open_tag e a defina como Off. Odeio short tags.

Ajustes no Apache

Antes, crie um diretório em C:/ (ou na sua unidade do sistema) chamado WEB. Este será seu DocumentRoot. Agora edite o httpd.conf, que fica no mesmo diretório do php.ini:

• Procure por DocumentRoot e mude o caminho para C:/WEB
• Procure também por <Directory "${path}/www"> e altere para <Directory "C:/WEB">
• Descomente a linha LoadModule rewrite_module modules/mod_rewrite.so - este é o famoso mod_rewrite do Apache

Tente executar o EasyPHP e certifique-se que está tudo certo. Vamos ao próximo item...

IDE

Eu nunca fui fã de IDEs para desenvolvimento. Acredito que elas, se usadas de forma massiva, são ruins para a formação de um desenvolvedor. Sempre utilizei ferramentas simples, como Notepad++, E Text Editor, Gedit, etc. Já usei até o Geany por algum tempo.

Porém, o tempo vai passando e você acaba esquecendo de nomes de funções, métodos e classes - são tantas linguagens, procedimentos, funções, que não há memória que suporte tudo - e procurar na documentação é uma completa perda de tempo. Foi aí que resolvi procurar uma IDE simples, não intrusiva, que pudesse me auxiliar no dia-a-dia. E encontrei o maravilhoso Netbeans. Então baixe o Netbeans com o pacote PHP (ou completo, você decide) e instale-o.

Não fiz nenhuma mudança na configuração do Netbeans, somente nas cores e fontes. Mas isso fica a gosto de cada um.

Ferramenta de controle de versão: GIT

Muitos desenvolvedores estão começando a usar GIT. Ele é simplesmente fantástico, e faz muito bem o trabalho de controle de versões. Na minha opinião, ele é muito superior ao SVN. Se você deseja colaborar com projetos Open Source, ou mesmo criar projetos próprios, recomendo - e muito - sua utilização.

Existe um port que funciona muito bem em todas as versões do Windows, e não precisa do Cygwin. Faça o download da última versão aqui. Pra aprender como o GIT funciona recomendo a leitura dos artigos do Akita, principalmente o Micro tutorial de Git.

Editor de texto simples

Complementando a IDE, sempre utilizo um editor simples pra edições rápidas. Quando você precisa fazer pequenas edições em arquivos, não há necessidade de abrir a IDE e aguardar ela carregar, certo? Pra isso eu uso o Notepad++, que pode ser baixado aqui.

Bem, este é o meu ambiente PHP. Já passei por diversas configurações, ajustes, programas e IDEs... acredito que, no Windows, esta seja a melhor configuração (pelo menos pra mim é ). Espero que seja pra você também.

Nota: Falta um item, que é o debug de aplicações PHP. Mas vou deixar isto para um próximo artigo, já que este ficou um pouco extenso.

As short tags do PHP NUNCA DEVEM SER USADAS. Porque não?

Porque o php.ini deve ter a opção short_open_tag = On definida. Ou seja, se o php.ini do seu cliente estiver com essa opção desativada, sifu perdeu preybóy seu código não irá funcionar.

Então, se você deseja escrever um código compatível e não ter nenhuma dor de cabeça futura, use a única tag de abertura que deveria existir no PHP: <?php echo 'Essa'; ?>.

Esqueça:

<? echo 'Sou noob'; ?>
<?= 'Sou mais noob ainda'; ?>
<% echo 'Estou programando na linguagem errada'; %> // ASP Tags, ECA!

E lembre-se somente disto:

<?php echo 'Sou O cara, ABS'; ?>

Mais um dado importante for the win: no PHP 6 as short tags serão desativadas por padrão - ou talvez até nem serão suportadas, está ocorrendo uma discussão a respeito -, então é bom acostumar-se.

Fica a dica e o puxão de orelha, principalmente pro pessoal que colabora com o mundo Open Source.