Uma das novidades mais interessantes do ano, o botão “+1″ criado pelo Google, possibilita que usuários indiquem que uma página, post ou site é relevante, interessante para eles. É bem parecido com o botão “Curtir” do Facebook, porém está ligado à rede social do próprio Google, a Google+ (Plus). Ele já pode ser visto em grande parte dos portais e blogs e é uma ótima ferramenta para melhorar a interação dos usuários com o seu site.

Qual a vantagem em usá-lo?

Quando clica no botão “+1″, é como se o usuário dissesse para o Google “Ei, eu acho que essa página tem um conteúdo interessante e pode ajudar outras pessoas”. E a empresa já deu indicações de que o número de usuários que clicam no botão “+1″ de uma determinada URL tem impacto no seu ranking de buscas. Ou seja, se vários usuários clicarem no botão “+1″ da sua página é bem provável que você suba algumas posições nas páginas de busca. E mais, se um dos meus contatos tiver clicado no botão “+1″ de uma das páginas do seu site, essa página aparecerá como recomendada pra mim quando eu fizer uma busca no Google.
Depois de clicar no botão o usuário pode ainda fazer um comentário sobre a página, fazendo assim um post no seu perfil do Google+ (se tiver um perfil lá) e gerarando ainda mais tráfego para seu endereço.

Código

Vou mostrar aqui como usar a opção de carregamento assíncrona do botão, aquela em que o botão será adicionado após o carregamento da sua página, deixando-a mais rápida e impedindo que qualquer problema nos servidores do Google possam vir a prejudicar seu site.
São basicamente duas partes. A primeira é o botão em si, que usa a seguinte tag:

<g:plusone size="medium" annotation="inline"></g:plusone>

Basta colocar este trecho de código no lugar onde você quer que o botão apareça. Abaixo do título da página ou ao final do texto do post, por exemplo. Perceba que ela tem duas propriedades, size e annotation. Logo mais vou explicar como você pode usá-las para obter a melhor configuração para o seu caso.

Depois, ao final da página coloque o código que irá carregar substituir a tag acima pelo botão em si. Note que este código deve vir sempre depois da tag do botão.

<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};

 (function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  </script>

Note aqui que colocamos, logo no início da tag, a opção “lang” configurada com o valor ‘pt-BR’. Isso é importante pois configura o botão para usar o idioma “Portugês do Brasil”.

Tamanho e tipo

Usando as propriedades size e annotation é possível alterar o tamanho e o tipo do botão “+1″. Existem 4 tamanhos (size) disponíveis: Small (pequeno) 24px de largura, Medium (médio) 20px, Standard (padrão) 24px e Tall (largo) 60px. Além disso você pode escolher entre três maneiras diferentes de exibir a o número de pessoas (annotation) que já clicaram e marcaram aquela página com ‘+1′: Inline (linha de texto), Bubble (balão) e None (nenhum). Combinando essas opções você terá 12 tipos diferentes de botão:

Tupo o que você precisa fazer é escolher qual das combinações melhor se ajusta ao seu layout e alterar a tag do botão ajustando estas propriedades.

Alguns exemplos:

<g:plusone size="standard" annotation="bubble"></g:plusone>

<g:plusone size="medium" annotation="inline"></g:plusone>

<g:plusone size="tall" annotation="bubble"></g:plusone>

<g:plusone size="small" annotation="none"></g:plusone>

CSS3 Text Gradient

Antes de tudo: por que esta é a melhor forma?
Existem muitas maneiras de se obter o text gradient. Mas eu prefiro esta porque ela não requer nenhuma alteração no codigo HTML. Não é preciso ficar enchendo o código de tags ou propriedades como data-text só para se conseguir um efeito que daqui há 6 meses ou um ano pode não ser mais desejado.

Então tudo o que você precisa para aplicar o efeito em um título <h1> é:

h1 {
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(0, 0, 0, 1)),
to(rgba(243, 255, 114, 1))
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:120px;
}

Como você já deve ter percebido, as cores são definidas nas linhas from(rgba(0, 0, 0, 1)) e to(rgba(243, 255, 114, 1)). Basta trocar os valores RGBA (RGB + Alpha) pelos das cores do seu gradiente. E pronto. Lembrando claro que o efeito só será visível em browsers compatíveis com CSS3.

Com certeza esta não é a única forma de conseguir o text gradient e se você souber de alguma outra, por favor, compartilhe conosco. Abraço!

• As duas instalações devem usar o mesmo database MySQL, com prefixos diferentes;
• Você deve ter acesso ao FTP das das duas instalações;
• As duas instalações devem utilizar a mesma versão WordPress (2.7 ou superior).

Editando os arquivos

Esta é uma solução que exige um mínimo conhecimento de edição, upload e atualização do código-fonte WordPress. Sugiro também que antes de começar você crie um backup dos arquivos do seu site e da sua base de dados. Também recomendo que comente todas as alterações para que depois possa identificá-las rapidamente.

Em todas as instalações você deve alterar os seguintes arquivos:

No arquino wp-config.php:
Adicionar esta linha acima do comentário “/* That’s all, stop editing! Happy blogging. */”:

define('CUSTOM_CAPABILITIES_PREFIX', 'wp_');

No arquino wp-includes/capabilities.php:
Substituir a linha

$this->cap_key = $wpdb->prefix . 'capabilities';

Por

if (defined ('CUSTOM_CAPABILITIES_PREFIX')) {
	$this->cap_key = CUSTOM_CAPABILITIES_PREFIX . 'capabilities';
	}
	else {	$this->cap_key = $wpdb->prefix . 'capabilities';
	}

Em todas as instalações, exceto a principal (aquela que terá a tabela de usuários original):

No arquino wp-config.php:
Adicionar este trecho acima do comentário “/* That’s all, stop editing! Happy blogging. */”:

define ('WPLANG', '');
define('CUSTOM_USER_TABLE', 'wp_users');
define('CUSTOM_USER_META_TABLE', 'wp_usermeta');

E substituir a linha:

$table_prefix = 'wp_';

Por

$table_prefix = 'outroprefixo_' //este deve ser o prefixo único de cada instalação

Eu testei e funcionou perfeitamente.
Espero que ajude.

Green Landscape Beanstalk

Cosmic Love Goddess

Vector Style Woman

Dark Sea Ship

Twister

Terrifying Horror

Dark and Mysterious TV Head

Eerie Looking

Dark and Eerie

Google Map Parody

Surreal 3D Outdoor Room

Dark Melancholic Scene

Vivid Flaming Skull

Surreal Environment

Matte Painting

Breathtaking Underwater Apartment

Fallen Angels Dream Fly

Planet

Funky Perspective

Floating Island on Water

Fairy Tale

Floating Island 2

Flying Hippo

Realistic Space Landscape

The Making of Constant Slip

Walking Bone House

Derene Panorama

Magic Holland

Deathly

Mysterious Night

Surreal Scenary

Fantasy Night Day Composition

Black White Falling Scene

Island

Imaginary

Splash Artwork

Matte Painting Inspired Scene

Moonlight Night

Imaginary Photo Manipulation

Via Naldz Graphics

Link para instalação do Flash Builder 4.

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

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, 200x200px;

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.

No Photoshop, uma Action nada mais é que uma ou mais ações executadas automaticamente e em sequência, como se fosse um “passo a passo”. Essas ações são gravadas pelo usuário e podem ser executadas depois em qualquer arquivo ou em vários arquivos ao mesmo tempo.

Também é possível exportar um ou mais Actions e utilizá-las em qualquer computador, assim como fazer download de Actions na Web e usá-las no seu computador.

Ações simples

Vamos supor que você tem uma galeria de fotos no seu site e recebeu várias imagens que devem ser redimensionadas para que caibam na largura da sua galeria. Então o que você precisa é basicamente repetir os mesmos passos para todas elas:
1º – redimensionar a imagem.
2º – aplicar um leve filtro de nitidez (Sharpen) para que ela não fique desfocada.
3º – salvar a imagem em um formato compatível (JPG, GIF ou PNG).

Não é nada complicado de se fazer, mas se a sua galeria tiver 20 fotos você levará um tempo considerável para editar todas as imagens. Veja como essa edição pode ser feita com uma action:

1 – Abra uma das imagens no Photoshop;

2 – Clique no menu  Window > Actions para abrir o painel de ações;
Você deve encontrar algumas ações pré-definidas do Photoshop.

3 – Clique no botão  ”New action” ;

4 – No painel que se abre, dê um nome para a ação e escolha uma tecla de atalho (opcional). Clique em  ”Record”;

A partir de agora, todos os comandos estão sendo gravados e pertencerão à nova ação. Perceba inclusive que o botão  ”Record” do painel está iluminado indicando a gravação.

5 – Clique no menu  Image > Image Size e altere a largura da imagem para 500px. Clique em OK.

6 – Clque no menu  Filter > Sharpen > Unsharp Mask e defina os valores conforme o exemplo:

7 – Agora clique em  File > Save for Web… e salve o arquivo como JPG na pasta em que desejar;

8 – Finalize a gravação da ação clicando no botão  ”Stop” no painel Actions;

Pronto, sua ação está salva e pode ser utilizada em outros arquivos, Perceba que no painel Actions, abaixo do nome da nova ação, ficaram gravados todos os comandos utilizados.

Utilizando a Action

Agora que já tem a sua action pronta, basta aplicá-la em todas as imagens para as quais você precisa repetir os mesmos passos.
Para aplicá-la em um arquivo de cada vez, basta abrir a imagem no Photoshop e utilizar a tecla de atalho que você definiu para a Action (no meu caso, Ctrl + F12). Para aplicá-la em todos os arquivos de uma só vez, abra todas as imagens, Siga estes passos:
1 – Vá até o menu File > Automate > Batch…;
2 – Na janela que se abrirá, na caixa de seleção “Action”, escolha ação que acaba de criar (no meu caso “Galeria”);
3 – Para “Source” escolha “Opened Files”;
4 – Em “Destination” selecione “None”.

5 - Clique em OK;
Feito. Todas as imagens foram redimensionadas, receberam o filtro de nitidez e foram salvas na pasta que você havia escolhido.

Perceba que este é apenas um exemplo simples. Você pode gravar muitos outros tipos de comandos e criar actions para as mais variadas tarefas do seu dia a dia. Como disse é uma questão de costume, quando você estiver acostumado a usar actions vai perceber várias oportunidades de usá-las e poupar tempo.

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.

Veja o tutorial

Cartões Natalinos

Veja o tutorial

Cartão Postal para o Natal

Veja o tutorial

Ilustração para o Natal

Veja o tutorial

Cartão de Natal com efeitos de luz

Veja o tutorial

Desenhando Árvores de Natal

Veja o tutorial

Chapéu do Papai Noel

Veja o tutorial

Bolas de Natal

Veja o tutorial

Como criar backgrounds e wallpapers para o Natal

Veja o tutorial

Mais uma árvore natalina

Veja o tutorial