Link para instalação da Firebug: http://getfirebug.com/

Os gráficos de barras seguem exatamente a mesma mecânica dos gráficos pizza, ou seja, você deve fazer a chamada à URL da API passando todos os parâmetros desejados e receberá como retorno a imagem do gráfico pronta para ser inserida na sua página. Veja o exemplo de um gráfico de barras verticais e os parâmetros usados para criá-lo:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:20,40,60,80,30&chco=76A4FB&chs=200x125&chxl=0:|Jan|Fev|Mar|Abr|Mai" />

As principais características do exemplo que acabei de criar são: ele é um gráfico de barras verticais, com 2 eixos visíveis (20, 40,… e Jan, Fev,…) e tem 180 x 150 pixels. Essas características foram passadas à API usando estes parâmetros:
Tipo cht=bvs – informa que quero um gáfico de barras verticais;
Eixos chxt=x,y – significa que quero os eixos X e Y visíveis;
Dados chd=t:20,40,60,80,30 – os dados;
Cor chco=76A4FB – mostra que desejo apenas uma cor;
Tamanho chs=200×125 – define o tamanho da imagem;
Labels chxl=0:|Jan|Fev|Mar|Abr|Mai – informo as labels do eixo X (0);

Alterando valores e escala

Por default o eixo vertical vai sempre de 0 a 100, então quando editar os valores do gráfico e quiser que o eixo fique abaixo ou acima desses valores você deverá usar a escala. Por exemplo, se eu tenho um gráfico onde o valor mais alto é 41% não há necessidade do meu gráfico exibir valores até 100, veja abaixo a diferença entre os dois exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai &chxr=1,0,50&chds=0,50" />

Perceba que no segundo gráfico usei 2 parâmetros a mais, que indicam que quero uma escala diferente da default:
Eixo chxr=1,0,50 – define o eixo Y em 0 a 50;
Escala chds=0,50 – define a escala de 0 a 50;

Definindo 2 ou mais séries

Um gráfico de barras pode ter mais de uma série de dados em cada intervalo o que muitas vezes se faz necessário. Tudo o que você tem que fazer é passar os valores de cada série separados por “|” e definir o tipo de gráfico para bvg (cht=bvg). Veja os exemplos abaixo e compare suas URLs:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35,41|20,40,60,80,30&chco=fa432a,76A4FB&chs=320x150& chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=370x150&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50" />

Note também que foi definida uma cor para cada série através do mesmo parâmetro chco que já havíamos usado, mas agora com as cores separadas por vírgula. Você pode usar quantas séries desejar em cada gráfico, basta tomar cuidado para que o seu tamanho comporte todas as barras.

Legendas e grids

Para uma melhor visualização das informações dos gráficos quase sempre é necessário que usemos um grid por trás das barras, que facilitará a comparação entre elas, e claro uma legenda para informar melhor o visualizador. Para tanto basta usar outros dois parâmetros bem simples: chg para adicionar grids e chdl para legendas. O primeiro aceita 4 parâmetros principais: o intervalo entre grids do eixo X, intervalo para o eixo Y, largura do traço, espaço entre os traços. O segundo aceita como parâmetro o texto das legendas separados por |. Veja o exemplo:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=450x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha" />

Largura e espaçamento das barras

Muitas vezes por conta de espaço ou por falta dele, será necessário fazer algumas adaptações nos tamanhos do gráfico. Um dos truques que ajuda nesse processo é alterar a largura e espaçamento entre as colunas e séries de colunas. Podemos fazer isso com o parâmetro chbh, que aceita 3 parâmetros: largura das barras, espaço entre barras, espaço entre os grupos de barras (séries). Veja os exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=205x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=5,1,10" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=445x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=25,1,10" />

Conclusão

Mesmo com exemplos bastante simples e passagem bem rápida apenas pelos principais parâmetros da Chart API, fica claro que o seu potencial de utilização pode envolver desde posts simples em um blog até a integração com sistemas de informação que necessitem oferecer uma melhor visualização de dados. Se você ficou interessado, recomendo fortemente que visite a página da API e sua documentação pois há dezenas de outras possibilidades de customização para os gráficos.

QR Codes com links

Uma das maneiras mais comuns de utilização de QR Codes é o direcionamento do usuário para o site de uma promoção ou produto através de um link. Para isso basta criar o código contendo o link para onde desejamos enviar o usuário. Por exemplo, para gerar um QR Code com link para o Top rated basta usar esta URL:

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=http://www.toprated.com.br

Ao lado a imagem gerada. Entenda como montei essa URL:

http://chart.apis.google.com/chart? é o endereço padrão da API;

chs=200×200 informa o tamanho da imagem que eu desejo, 200×200px;

cht=qr informa o tipo de saída que eu espero, QR Code;

chld=|0 retira as margens (bordas) da imagem;

chl=http://www.toprated.com.br e aqui eu informo o texto que quero.

A grande maioria dos leitores de QR Code identifica automaticamente este texto como sendo um link e direciona o usuário para a página.

QR Codes com frases, senhas e outras informações

Outra utilidade dos QR Codes é servir para passar textos ou frases curtas para os usuários. Por exemplo, vamos supor que eu queira espalhar pela minha loja QR Codes com dicas de produtos em promoção para que meus clientes possam explorar:

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=tv de plasma R$ 1499

Ao usar o leitor do seu celular para decifrar o código ao lado, o cliente encontrará a seguinte frase: TV de plasma R$1499. A URL é exatamente igual à do exemplo anterior, só muda o texto do final.

Como dá pra perceber, esta é uma ferramenta muito interessante para estimular a interação com seus consumidores e usuários, que pode ainda ser usada para vários tipos de ações diferentes. Além disso com a constante queda de preço de celulares com suporte aos leitores de QR Code, cada vez mais pessoas terão acesso a esse tipo de tecnologia. Vale a pena começar a pensar nos QR Codes como uma boa opção de comunicação.

A Chart API

A API do Google Chart Tools, também conhecida como Chart API, é a caçula do projeto Google Visualization que também engloba a ferramenta Interactive Charts, um pouco (bem pouco) mais complexa. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico. Por exemplo, veja como fica a URL para criação de um gráfico de barras simples e a imagem resultante:

<img src="http://chart.apis.google.com/chart?chxt=x,y&cht=bvs&chd=t:60,70,85,65,40&chco=76A4FB&chls=2.0&chs=180x150
&chxl=0:|Jan|Fev|Mar|Abr|Mai" alt="" />

Note que a imagem já vem com o gráfico pronto, com os eixos, labels (Jan, Fev, etc..) e barras. Perceba também que a altura e largura da imagem são definidas na própria URL, nesse caso 180×150. Você só precisa posicioná-la na sua página como uma imagem comum.
A mesma API pode ser usada para criar vários tipos de gráficos: barras, pizza, linhas, candlestick, etc.. Como não quero reescrever a documentação da API e sim dar uma introdução, vou mostrar aqui como criar gráficos pizza e de barras, que acredito serem os mais comuns.

Gráficos Pizza

O primeiro tipo de gráfico que vou mostrar é o do tipo Pizza. Como em todos os outros, o segredo para criar um bom gráfico é saber quais os parâmetros certos devemos passar para a API. Os principais são os do tipo de gráfico (cht), de dados (chd) e de tamanho (chs). Veja o exemplo de um gráfico usando apenas esses 3 parâmetros:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=180x125" class="alignleft" />

No exemplo ao lado foram usados os seguintes parâmetros:
Tipo: cht=p – significa que quero um gráfico pizza (p);
Dados: chd=t:45,20,20,15 – envio os dados em formato texto (t) separados por vírgula;
Tamanho: chs=180×125 – indico o tamanho da imagem, 180×125;

Adicionando labels e legendas

Claro que apenas o gráfico, sem nenhuma indicação de valores ou legenda, não é lá muito útil já que dificilmente alguém vai conseguir entender e analisar os dados. Então é hora de começar a melhorar o gráfico. Para isso podemos usar 2 boas opções: labels e legendas. Com elas o gráfico vai ficar bem melhor.
Mais uma vez, tudo o que você precisa fazer é adicionar os parâmetros corretos, as labels usam o parâmetro chl e as legendas usam o parâmetro chdl. Veja então como fica o gráfico, agora com legendas e labels:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=380x250&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Esse é exatamente o mesmo gráfico anterior, agora com os seguintes parâmetros:
Tipo: cht=p – gráfico pizza (p);
Dados: chd=t:45,20,20,15 – os dados;
Tamanho: chs=380×250 – o tamanho;
Labels: chl=45%|20%|20%|15% – labels;
Legendas: chdl=Janeiro|Fevereiro|Março|Abril – legendas;

Usando 3D

E se você quiser apresentar o seu gráfico em 3D basta fazer uma pequena alteração, trocando tipo de gráfico de pizza (p) para pizza 3D (p3). Realmente não podia ser mais fácil, veja como fica o gráfico anterior agora em 3D:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=480x200&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Olhe a URL da imagem e note que ela é praticamente a mesma do exemplo anterior, as únicas diferenças são no parâmetro cht, que agora pede um gráfico 3D (p3) e no tamanho do gráfico.

Customizando as cores

Existem três maneiras diferentes para customizar as cores de um gráfico mas todas elas usam o mesmo parâmetro chco. A diferença está na quantidade de cores que eu passo para esse parâmetro.

Usando uma cor

A primeira forma de definir as cores do gráfico é escolher uma cor base que será usada com intensidade gradual afim de diferenciar cada uma das áreas do gráfico. É exatamente como vínha fazendo antes, porém estava usando a cor default do gráfico (amarelo), mas eu posso escolher a cor de base, por exemplo:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15,45,55&chs=320x200&chdl=IE6|Firefox|IE7|Chrome|Safari|Opera
&chco=c60000" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,12,20,5,20,15&chs=320x200&chdl=Corel|Adobe|Apple|Microsoft|Sun|Sony
&chco=1da3f8" alt="" />

Usando gradiente

Outra maneira de definir as cores do gráfico é usando um gradiente. Para isso basta usar o parâmetro chco para passar 2 cores diferentes, separadas por vírgulas. Seu gráfico será apresentado com as cores formando um gradiente que inicia com a primeira cor e finaliza com a segunda:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:15,23,45,20,20,15&chs=320x200&chdl=NYTimes|Le Monde|AS|Estadão|Folha de SP|LATimes&chco=c60000,1da3f8" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:5,32,45,20,20,15&chs=320x200&chdl=Brasil|EUA|Japão|Itália|Alemanha|China
&chco=58e015,fffc00" alt="" />

Definindo uma cor para cada valor

Por fim, é possível ainda definir uma cor para cada um dos intervalos do gráfico, para isso basta passar para o parâmetro chco cada uma das cores, seguindo a mesma ordem dos valores, separadas por “|”:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=320x200&chdl=China|França|México|Brasil
&chco=c60000|1da3f8|58e015|fffc00" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=340x200&chdl=Janeiro|Fevereiro|Março|Abril
&chl=45%|20%|20%|15%&chco=67087b|e3007a|00a8eb|79c471" alt="" />

Finalizando com background e margens

Para finalizar o seu gráfico e deixá-lo perfeito você pode ainda usar mais 2 parâmetros bem simples para definir a cor do background do gráfico e suas margens. Veja como:

Background

Se a cor de fundo de seu site não é o branco (padrão de background dos gráficos), você pode customizá-la usando o parâmetro chf. Basta passar o valor da cor desejada, precedida por bg,s, dessa maneira: chf=bg,s,dddddd;

Margens

O parâmetro que define as margens do gráfico (chma) também é bem simples, você deve passar os valores desejados em pixels, separados por vírgula, seguindo esta ordem: esquerda,direita,superior,inferior|largura_da_legenda,altura_da_legenda. Um bom exemplo seria: chma=20,20,20,30|100,20.
Abaixo um gráfico usando estes dois últimos parâmetros, de cor de fundo e de margens:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=660x300&chl=45%|20%|20%|15%&
chdl=Janeiro|Fevereiro|Mar%C3%A7o|Abril&chco=c60000|1da3f8|58e015|fffc00&chf=bg,s,dddddd&
chma=20,20,00,30|100,20" alt="" />

Conclusão

Como dá para ver nos exemplos e na quantidade de opções de customização e combinações possíveis, é claro o potencial dessa API para agilizar e facilitar a vida de quem volta e meia precisa fazer um gráfico para seus artigos, notícias e sites, ou mesmo integrar com um banco de dados para criação dinâmica dos gráficos. Além da facilidade em usar uma API já pronta e muito bem feita, temos a segurança que vem do fato dela ser uma criação do Google e ser hospedada por ele, garantindo estabilidade e quase 100% de disponibilidade. Não há limite para o número de requisições que você pode fazer por dia, o Google só pede para que você avise (chart-api-notifications@google.com) caso sua necessidade seja maior que 250.000 chamadas por dia.

Se você gostou mas acha que ainda não dá pra usar essa ferramenta por conta de alguma outra necessidade que ela não cobre, vale a pena dar uma olhada na sua documentação completa, pois o intuito aqui era apenas de dar uma introdução, existem dezenas de outras configurações possíveis.

E se bateu aquela preguiça de escrever tantos parâmetros, você pode usar o Chart Wizard, ferramenta disponibilizada pelo Google para criação de gráficos baseados nessa API. Porém, recomendo que você leia bem o tutorial e a documentação para que não precise ficar voltando ao assistente toda vez que precise de uma pequena alteração ou variação do gráfico. E claro, um desenvolvedor que se preze tem que entender o que está fazendo.

No próximo post sobre essa API vou mostrar como criar gráficos de barras.

Observação

O tamanho dos gráficos, eis o calcanhar de Aquiles da Charts API: quando usamos gráficos com mais de um elemento (labels + legendas) o sistema tem certa dificuldade em acomodá-los sem que nenhum deles seja cortado. Então algumas vezes é preciso dar “uma mãozinha” e fazer pequenos ajustes no tamanho das imagens para uma perfeita visualização. Se isso acontecer com você, tente alterar a largura ou altura do gráfico, não é difícil de resolver.

Importando a API

A API de Idiomas oferecida pelo Google é muito fácil de usar e pode ser importada diretamente dos servidores da empresa, o que permite que você a utilize sem precisar copiar nenhum arquivo para o seu próprio servidor. Além disso, importar a API diretamente do Google garante que você estará sempre usando a sua versão mais atualizada. Para incluí-la na sua página basta incluir a chamada para o endereço de APIs do Google e então carregar a API de Idiomas:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

</script>

Criando a função

A função que criaremos para fazer a tradução utilizará duas das funções fornecidas pela API de Idiomas. A primeira, google.language.detect, detecta o idioma original de um bloco de texto e a segunda, google.language.translate, traduz um bloco de texto do seu idioma original para outro. Nossa função então tem 3 passos principais:

1 – Detecta o idioma do texto que queremos traduzir;
2 – Traduz o texto para o idioma que desejamos;
3 – Insere a tradução na página ou substitui o texto original;

O código completo da função:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function traduzir(original, traduzida, idioma) {

	var text = document.getElementById(original).innerHTML; //div com o texto original
	var translated = document.getElementById(traduzida); //div que receberá o texto traduzido

	google.language.detect(text, function(result) { //detecta o idioma do texto original
	if (!result.error && result.language) {
	google.language.translate(text, result.language, idioma, //traduz o texto
	function(result) {
	if (result.translation) {
	translated.innerHTML = result.translation; //insere o txt traduzido na div escolhida
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na tradução
	}
	});
	} else {
	translated.innerHTML = "Não foi possível fazer a tradução"; //Caso haja erro na detecção
	}
	});

}

</script>

Perceba que a função tem três argumentos:
1° – original – Id da <div> que contémo texto a ser traduzido;
2° – traduzida – Id da <div> que receberá a tradução;
3° – idioma – Código do idioma para qual o texto será traduzido. Veja a lista aqui.

O HTML

Tudo o que você precisa no seu código HTML é que o texto esteja dentro de uma <div> com um id específico e um botão que execute a função de tradução. Ou seja, se o seu HTML já está pronto, basta colocar uma <div> envolvendo o texto que vai ser traduzido e atribuir um id a ela. Veja abaixo o código para este exemplo:

<div id="texto_original">
<h3>Design</h3>
<p>JavaScript é uma linguagem de programação criada pela Netscape em 1995, que em princípio se chamava LiveScript, a Netscape após o sucesso inicial desta linguagem, recebe uma colaboração considerável da Sun, após esta colaboração, podemos dizer que o JavaScript é uma linguagem compatível com a linguagem Java, por esta razão, a semelhança dos nomes "JavaScript".</p>
<p>Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe.</p>
<p>Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript  C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.</p>
</div>
<p><a onClick="traduzir('texto_original','texto_original','en');" href="#" id="botao_traduzir">Traduzir o texto</a></p>

Considerações finais

Pronto, como você vê é muito simples e fácil de usar. Dê uma olhada na demonstração e baixe os arquivos desse exemplo para estudar e testar as suas próprias alterações. No exemplo você encontrará também algumas linhas CSS que usei para estilizar este exemplo mas que não são necessárias para o funcionamento da API, então se quiser pode retirá-las sem nenhum problema.

É importante saber que esta API ainda está em desenvolvimento, então muitas coisas novas ainda devem aparecer, assim como um pouco de instabilidade. Também é bom ter em mente que existe um limite da quantidade de texto que pode ser traduzida de cada vez. O Google promete aumentar este limite constantemente, hoje ele é de 5000 caracteres. No entanto, nos meus testes o máximo que consegui foram 1200 caracteres.

É claro que se você tem um site que fornece informações que dependem de traduções precisas, como documentos oficias ou jurídicos, onde uma simples palavra pode fazer toda a diferença, o ideal é fazer a tradução manualmente e criar uma versão separada do texto. Mas se tudo o que você precisa é fornecer uma versão minimamente inteligível do seu texto esta é uma ótima solução.

A solução

Para desenvolver esse micro sistema de galeria de fotos vou usar uma função PHP muito útil, a Glob(). Essa função nos permite ter acesso às pastas do servidor e retornar listas de arquivos de acordo com o seu nome ou extensão. Então é isso que faremos, vamos exibir todas as imagens de uma pasta usando PHP. Salvaremos duas versões de cada foto, uma miniatura (thumbnail) e uma imagem maior, e usaremos a função Glob() para exibí-las corretamente. Ao final teremos uma galeria igual a essa:

Preparando as imagens

A primeira coisa a fazer é preparar e cortar as imagens nos formatos corretos. A galeria funcionará mesmo que cada imagem tenha um tamanho diferente, mas ficaria com aspecto horrível. Então o ideal é cortar todas no mesmo formato. Para esse exemplo cortei as thumbs em quadrados de 100px x 100px e as imagens maiores em 500px x 500px.

Crie uma pasta com nome “fotos_galeria” (ou outro nome que preferir) e salve todas as imagens dentro dela, nomeando as thumbs com um “_p” no final do nome do arquivo, exemplo: foto1_p.jpg; e as imagens maiores com um “_g” no final, exemplo: foto1_g.jpg.

Agora faça o upload da pasta para o seu servidor PHP. Sua URL vai ficar algo parecido com:
http://www.seudominio.com.br/fotos_galeria

Preparando o arquivo PHP

O arquvo PHP responsável pela criação da galeria é extremamente simples e está dividido em duas partes. A primeira parte é o o bloco de estilos CSS da página e o segundo o bloco da função PHP responsável pela lógica da galeria.

O trecho CSS
O CSS não precisa de nenhuma alteração a não ser claro que você queira alterar o visual da galeria. Veja abaixo:

<style>
body {
     text-align:center;
     margin:0;
     padding:0;
}
div {
     padding:13px;
     display:block;
     border:1px solid #ddd;
     background:#eee;
     font-size:10px;
     font-family:Arial, Helvetica, sans-serif;
     color:#999;
     margin:0 auto;
}
div.thumb {
     float:left;
     margin:0 14px 14px 0;
     padding:0;
}
div.thumb a {
     float:left;
     padding:13px;
}
div.thumb a:hover {
     background:#b70000;
}
div.thumb img {
     width:100px;
     height:100px;
}
div p {
     padding:8px 0 0px;
     margin:0;
}
div a {
     color:#666;
     text-transform:uppercase;
     text-decoration:none;
     font-weight:bold;
}
div a:hover {
     color:#b70000;
     text-decoration:underline
}
</style>

O trecho PHP
O trecho que contém o código PHP responsável pela montagem da galeria também não é complicado e precisa apenas de 2 pequenas modificações para que funcione corretamente no seu servidor. No início do bloco você deverá:
- Informar a URL onde o arquivo PHP estará publicado. No meu caso: http://www.toprated.com.br/galeria.php;
- Informar o nome da pasta onde estarão as imagens. No meu caso: fotos_galeria;
Confira o trecho completo já comentado e explicado linha a linha:

<?php

  //URL onde o arquivo PHP vai ficar
  $url_galeria = "http://www.toprated.com.br/galeria.php";

 //URL onde o arquivo PHP vai ficar
  $pasta_fotos = "fotos_galeria";

  //Início da função

  $fotos = array();

  //Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
  foreach(glob($pasta_fotos . '/{*_p.jpg,*_p.gif}', GLOB_BRACE) as $image) { 

  $fotos[] = $image;

  }

  //Verifica se deve exibir a lista ou uma foto
  if ($_GET["image"] == "") {

  //Faz o loop pelo folder de imagens
  for($i=0; $i < count($fotos); $i++) { 

  //Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
  echo "<div class='thumb'>";
  echo "<a href='" . $url_galeria . "?image=" . $i . "'>";
  echo "<img src='" . $fotos[$i] . "'>";
  echo "</a>";
  echo "</div>";

  }

 } else {

  //Guarda o nome da imagem para montar o link da imagem grande
  $foto_g = explode("_p", $fotos[$_GET["image"]]);

  //Configura os links de próxima e anterior
  if ( $_GET["image"] == 0 ) { $anterior = ""; } else { $anterior = $_GET["image"] - 1; }
  if ( $_GET["image"] == count($fotos)-1 ) { $proxima = ""; } else { $proxima = $_GET["image"] + 1; }

  //Quando solicitada uma imagem em particular, monta a <div> e insere a imagem grande de acordo com o link
  echo "<div>";
  echo "<a href='" . $url_galeria . "?image=" . $proxima . "'>";
  echo "<img src='" . $foto_g[0] . "_g" . $foto_g[1] . "'>";
  echo "</a>";
  echo "<p><a href='" . $url_galeria . "?image=" . $anterior . "'>Foto anterior</a> | <a href='" . $url_galeria . "'>Voltar para a galeria</a> | <a href='" . $url_galeria . "?image=" . $proxima . "'>Próxima foto</a></p>";
  echo "</div>";

  }

?>

Publique

Pronto, basta publicar seu arquivo e testar online. O resultado final deve ficar como este: http://www.toprated.com.br/galeria.php.
Se quiser inserir a galeria no meio de outra página como fiz acima, basta usar um iframe simples linkando para o seu arquivo, dessa forma:

<iframe frameborder="0" allowtransparency="yes" scrolling="no" src="http://www.toprated.com.br/galeria.php" width="710" height="570"></iframe>

Para facilitar a vida dos mais preguiçosos segue link para o pacote com os arquivos usados nesse exemplo, incluindo o arquivo PHP e as imagens. Aliás, todas as fotos são do site SHC.ru, um ótimo lugar para procurar imagens Royalty Free.

Como eu disse, o intuito dessa micro galeria de fotos é ser o mais simples possível, portanto é óbvio que ela pode ser melhorada, e muito. Você pode adicionar ícones à navegação de próxima e anterior, por exemplo. Mas acredito que é uma boa opção para quem está procurando uma solução rápida e fácil para a partir dela criar a sua própria galeria de fotos. Espero que ajude.
Uma última dica: Se pretende usar esse arquivo em várias galerias diferentes dentro do seu site, é extremamente recomendável que você separe o CSS, crie uma folha de estilos individual e a use como um link na página para que suas alterações reflitam em todas as galerias simultanemante.

O menu de Preferências

Para começar, vamos abrir o menu de Preferências (Preferences) que fica no menu Edit > Preferences > General (você também pode simplesmente usar o atalho Ctrl+K. A seguinte janela será exibida:

Performance

Neste menu o que mais nos interessa é a seção “Performance” que você pode acessar através do menu ao lado esquerdo. É nela que vamos encontrar as configurações que lidam diretamente com gerenciamento de memória e processamento do Photoshop. Então, ao selecionar “Performance” no menu esquerdo, você verá a seguinte tela:

Ela é dividida em quatro partes, cada uma responsável por um aspecto diferente. Leia abaixo e entenda o que cada um deles gerencia e como alterar seus valores para melhorar a sua velocidade:

1. Memory Usage ou Uso de Memória

É aqui que definimos quanto da memória do computador nós desejamos destinar ao Photoshop. Se você está esperimentando problemas de lentidão no programa, experimente aumentar um pouco a quantidade, deixando-a entre 70-75%. Mas não exagere, deixe um pouco de memória para o restante do sistema, do contrário sua máquina pode travar.

2. History & Cache (Histórico e Cache)

Quando estamos editando uma imagem ou criando um layout, um dos comandos que mais usamos é o Undo (”voltar” ou “desfazer”). Isso porque é comum e natural que aconteçam pequenos erros que precisam ser corrigidos ou até mesmo pequenos testes e mudanças que fazemos e então mudamos de idéia. A possibilidade de poder “voltar” ou “desfazer” estas ações é tão importante que, no Photoshop, você pode até mesmoescolher quantos “passos” vocêquer guardar na memória para poder voltar atrás, o chamado “histórico”. Porém, cada um desses passos precisa ser armazenado na memória e tem grande impacto na velocidade de processamento. O padrão do Photoshop é “20″ passos, mas isso é muita coisa quando se trata de computadores mais lentos. Reduza este número para “10″ e você terá um bom ganho de performance.

Já o cache é usado para melhorar a forma como as imagens são processadas na tela (screen redraw no termo inglês) e os seus níveis podem variar de 1 a 8. Geralmente o Photoshop vem setado com 4 ou 6 por padrão. Em 90% dos casos o ideal é deixá-lo com apenas 1. Esta é a alterações que causa o maior benefício ao sistema. A única exceção é a edição de imagens de alta resolução (em torno de 10.000 pixels): nestes casos prefira o uso de cache levels mais altos (6 a 8).

3. Scratch Disks (Memória Virtual)

Um dos recursos do Photoshop para melhorar a velocidade de processamento é a utilização do espaço disponível na HD do computador para simular memória RAM. Essa simulação é o que chamamos de Memória Virtual. Sempre deixe todas as opções (HD’s) dessa caixa marcadas. Se tem alguma que não está sendo usada no momento, marque-a e a velocidade do seu programa aumentará com certeza.

Pronto, depois de alterar todas as opções clique em OK, feche e re-abra o Photoshop. Provavelmente você sentirá alguma diferença já na hora de abrir o programa, ele deve ficar mais rápido para inicializar e para a maioria das outras tarefas.

Tales Simon

Sawyer Hollenshead

Kinetic Singapore

Christian Sparrow

LOW MORALE

BootB

Pointless Ramblings

Kitty Attack

mel kadel

Frank PR

Redemption Maddie

Legwork Studio

NJ REBEL

Dawghouse Design Studio

Design Jobs on the Wall

Jesse Willmon’s Winter 2009 Design

marcol.art.pl

Schlafman.com

Chemistry Recruitment

Elan Snowboards

PSYOP

Dann Whittaker Creative

We Are not Freelancers

Oink!

Biola Undergrad

Heather Sloane

Free People Clothing Boutique

Grupa Firm

Football made in Africa

É preciso ter em mente o que você deseja e dominar bem a ferramenta que vai utilizar.

Para te ajudar nesse ultimo item achei uma ótima lista com 50 tutoriais que vão desde como criar um ícone de RSS personalizado até tutoriais mais complexos sobre como criar um ícone vetorizado.

Dica do blog Six Revisions