Como colocar o botão do WhatsApp no seu site

E, por isso, assim como aconteceu com o Facebook e Twitter, a criação do botão “Compartilhar no WhatsApp” foi algo natural e pode ser uma ferramenta de importante na geração de tráfego para o seu site.

É muito fácil adicioná-lo às suas páginas. Veja o passo a passo abaixo:

1 – Baixe este zip1.

2 – Abra o zip e encontre o arquivo “whatsapp-button.js” (dentro da pasta “dist”). Faça o upload para o seu servidor.

3 – Em suas páginas, adicione o código abaixo, substituindo http://www.seusite.com.br/js/whatsapp-button.js pela URL do arquivo no seu site e de preferência logo antes do fechamento da tag </body>:

 <script src="http://www.seusite.com.br/js/whatsapp-button.js"></script>

4 – No local onde você quer que o botão de compartilhamento “Enviar para o WhatsApp” apareça em suas páginas, adicione o código:

 <a class="wa_btn wa_btn_m" style="display: none;" href="whatsapp://send" data-text="Dê uma olhada neste link" data-href="">Envie para o WhatsApp</a>

Este código compartilhará sempre a URL da página atual. Se quiser compartilhar uma URL específica, basta usar a propriedade “data-href”. Exemplo: data-href=”http://www.toprated.com.br/”

5 – Pronto! Quando a página for visualizada em um dispositivo móvel, o botão será exibido, como no exemplo abaixo:

1 – Fonte: https://github.com/kriskbx/whatsapp-sharing

jQuery para iniciantes – Métodos

Porém, antes de começar a falar sobre métodos, vamos relembrar como funciona a sintaxe básica jQuery, pois ela será importantíssima para entender como interagir com os elementos da página:
Como vimos nos posts anteriores, no exemplo acima, a primeira parte da linha é responsável por selecionar o elemento com o qual queremos interagir. Nesse caso, selecionei o elemento <body>, ou seja, todo o corpo da página. Logo depois, utilizo o método .css() para alterar uma propriedade css deste elemento. Este tipo de sintaxe é bastante comum quando trabalhamos com jQuery. Sobre a primeira parte, os seletores, nós já falamos. Agora vamos à segunda etapa, os métodos.

Exemplo 1

Veja a demonstração abaixo. Navegue pelas abas Javascript, HTML e Result para ver todo o código e o live preview:

Veja que no exemplo acima, na aba Javascript [claro], usamos 2 seletores e 2 métodos jQuery:

$('#botao1').click(function () {

$(‘#botao1′) – aqui usamos o seletor ‘#botao1′ para selecionar o elemento HTML <a id=”botao1″>Mudar a cor do background</a>
.click(function () { – este método nos ajuda a vincular [bind] uma função ou método [neste caso, a mudança de background] ao evento de clique do objeto selecionado [‘#botao1′].

$('body').css('background-color', '#f90');

$(‘body’) – aqui usamos mais uma vez um seletor jQuery, agora para selecionar a tag <body>
.css(‘background-color’, ‘#f90′); – o método .css() é usado para alterar propriedades CSS do elemento selecionado [<body>].

Perceba que o método .css() recebe 2 parâmetros. O primeiro é o nome da propriedade que queremos alterar [background-color], o segundo é o valor que queremos atribuir a esta propriedade [#f90];

Exemplo 2

OK, alterei a cor do background, e daí? Daí que com esta mesma sintaxe você pode usar vários outros métodos jQuery.
Veja mais um exemplo:

O exemplo acima usa o mesmo seletor do primeiro código para vincular uma função ao evento clique do nosso botão, mas depois utiliza seletor e método diferentes.

$('#botao1').click(function () {

$(‘#botao1′) – aqui usamos o seletor ‘#botao1′ para selecionar o elemento HTML <a id=”botao1″>Ocultar/Mostrar título</a>
.click(function () { – este método nos ajuda a vincular [bind] uma função ou método ao evento de clique do objeto selecionado [‘#botao1′].

$('h1').slideToggle();

$(‘h1′) – seletor jQuery ‘h1′ selecionando a tag <h1>
.slideToggle(); – o método .slideToggle() aplica uma animação do tipo slide ao elemento selecionado [h1] ocultando-o se ele estiver visível ou exindo-o se estiver oculto.

Usamos exatamente a mesma sintaxe do primeiro exemplo, alterando apenas o elemento com o qual estamos trabalhando [de body para h1] e o método utilizado [de .css() para .slideToggle()].

Exemplo 3

Veja mais este exemplo, agora utilizando o método .append():

Aqui, repetimos mais uma vez a primeira linha, vinculando uma função ao evento clique do botão, mas usamos um outro método dentro da função:

$('ul').append('<li>Outro item</li>');

$(‘ul’) – seletor jQuery ‘ul’ selecionando a tag <ul> [lista]
.append(‘<li>Outro item</li>’); – o método .append() adiciona um elemento html ao final do elemento selecionado [ul]. Aceita como parâmetro o objeto a ser inserido.

Acima, usamos o método .append() para adicionar itens a uma lista. Veja que a sintaxe é exatamente a mesma dos outros exemplos.

Conclusão

Apesar da sintaxe extremamente simples e reutilizável [os exemplos acima usam praticamente a mesma sintaxe], podemos usar jQuery para as mais diversas tarefas e aplicações. Acima, mostrei apenas 4 (.click(), .css(), .slideToggle() e .append()) de dezenas de métodos disponíveis na biblioteca. Não perca tempo e comece a pesquisar mais métodos na documentação da jQuery. Você irá descobrir que há muitos deles que pode começar a usar agora mesmo e que com certeza facilitarão a sua vida.

Quer saber mais?

Confira os posts anteriores da série jQuery para iniciantes:
jQuery para iniciantes
jQuery para iniciantes II – Sintaxe e seletores

Como criar QR Codes dinamicamente

E com isso, novas necessidades surgem. Uma delas é a de criar QR codes dinamicamente. Imagine por exemplo um display eletrônico que exibe várias ofertas de produtos para clientes que estão na rua, no metrô ou em um estádio de futebol. Ao invés de mostrar o endereço de um link, por que não mostrar também um QR code? Ao invés de ter que digitar a url, tudo que os espectadores precisam fazer é apontar o celular para o código para serem então direcionados ao site do anunciante.

Quando preciso usar QR codes dinamicamente em projetos web, uso o QR Code Generator for JavaScript criado por Kazuhiko Arase. Veja como usá-lo abaixo:

function createQRCode(text, containerId, typeNumber) {
	var qr = qrcode(typeNumber || 4,'M'); // errorCorrectLevel = M
	qr.addData(text);
	qr.make();
	document.getElementById(containerId).innerHTML = qr.createImgTag();
};
createQRCode('http://www.toprated.com.br', 'exemplo1', 8);

No exemplo acima, criei uma função simples que recebe 3 parâmetros:
text é o texto (string) que será convertido para QR Code
containerId é o id do elemento onde será inserido o QR Code
typeNumber é o número de pontos, o que também influencia no tamanho da imagem e quantidade de caracteres da suportados

A vantagem dessa biblioteca é a independência de outros frameworks, o que faz com que você possa usá-la em conjunto com jQuery, Mootools, ou qualquer outra. Além disso, esse método não necessita de qualquer outra requisição HTTP, ao contrário da Google Chart API, que também pode ser usada para criação de QR Codes.
Além de JavaScript, há versões Java, Ruby, PHP, Python e AS3.

Mas se você é um adepto do jQuery, pode utilizar o wrapper jQuery.qrcode criado por Lars Jung, que deixa tudo ainda mais simples, como a possibilidade de usar cores:

jQuery("#exemplo2").qrcode({
	width: 200,
	height: 200,
	color: '#3a3',
	text: 'http://www.toprated.com.br'
});



Marcar e desmarcar checkboxes usando jQuery

jQuery 1.6+

Nas versões jQuery 1.6 e superiores, use s função .prop() para alterar a propriedade “checked” do checkbox, assim:

//marcar
$('.seuCheckbox').prop('checked', true);
//desmarcar
$('.seuCheckbox').prop('checked', false);

*: observe que neste exemplo estamos manipulando o checkbox através da sua classe “.seuCheckbox”.

jQuery 1.5 e anteriores

Use a função .attr() para marcar a caixa de seleção, alterando o valor do atributo “checked”. Desmarque o checkbox removendo este atributo:

//marcar
$('.seuCheckbox').attr('checked','checked');
//desmarcar
$('.seuCheckbox').removeAttr('checked');

*: observe que neste exemplo estamos manipulando o checkbox através da sua classe “.seuCheckbox”.

A função .prop() foi adicionada a partir da versão 1.6, por isso precisamos usar a .attr() no jQuery 1.5-.

(Via)

Como obter o valor de query strings via javascript

function getParameterByName(name)
{
  name = name.replace(/[[]/, "[").replace(/[]]/, "]");
  var regexS = "[?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/+/g, " "));
}

Basta passar o nome do campo que você quer resgatar como parâmetro da função. Por exemplo, para a url: http://www.toprated.com.br/?nome=MeuNome&idade=25

getParameterByName('nome');

A função retornará “MeuNome”.

Curso de Design, Lição 2 – Encontre seu estilo

Porém, com o tempo, é preciso encontrar a sua especialidade ou um estilo próprio. O seu estilo é aquele em que você se sente mais à vontade e no qual seu trabalho flui com maior naturalidade. Nem sempre é fácil, e ele não aparece de uma hora para outra. São necessários estudo e experiência para amadurecer e aperfeiçoar seu estilo. A chave para acelerar esse processo é sempre manter um olhar critico sobre seus trabalhos. Em retrospectiva, quais ficaram melhores? Em quais deles você teve mais dificuldade e o resultado não foi tão bom? Quais tiveram uma melhor repercussão? Por que?

Identifique seus pontos fortes e busque dar foco a eles. Identifique aquelas áreas que não são a sua praia e não passe a vida tentando ser aquilo que você não é.

Algumas pessoas são incríveis ao trabalhar com tipografia, outras ilustram muito bem; há profissionais que dominam usabilidade e constroem experiências perfeitas de navegação, outros manipulam imagens e criam maravilhas no Photoshop. Sem falar naqueles que criam animações e filmes 3D absurdos. São habilidades espetaculares e super valorizadas, mas você não precisa fazer tudo isso ao mesmo tempo. Ninguém faz.

Muitas vezes, amigos e pessoas que visitam o Top Rated me perguntam sobre que curso de Design devem fazer ou qual a melhor faculdade de design na minha opinião. Nem sempre tenho uma resposta para essas perguntas e por isso comecei a pesquisar sobre o assunto e perguntar para colegas qual o melhor curso de Design na opinião deles. Conversando sobre o assunto percebi que existem grandes cursos por aí, com ótimos professores e conteúdo. Porém, percebi também que existem algumas coisas, alguns macetes, que só se aprende na prática, no dia-a-dia. Por isso criei esta série de posts, com a qual espero ajudar aqueles que estão começando estudar ou já estão estudando Design.

Curso de Design, Lição 1 – Copie

É óbvio que essas pessoas não vão vender aquele quadro como sendo criação sua. São alunos, estudantes, que usam as grandes obras para entender como os profissionais conseguiram criar aquelas imagens. Ao copiar grandes telas, percebem cada nuance, cada tonalidade de cor, contraste e textura usados. São detalhes tão minuciosos que passam despercebidos e só conseguimos identificá-los ao tentar reproduzi-los.

Pois é, copiar é uma das melhores maneiras de aprender. Não é à toa que grandes pintores muitas vezes começavam a carreira como alunos de outros mestres e estudavam copiando as telas de seus mentores.
Portanto, não tenha vergonha de copiar. Procure referências, grandes trabalhos e layouts e tente copiá-los. Copie cada detalhe, entenda as cores usadas, os espaçamentos, contraste, bordas, como cada elemento se relaciona com o todo. Você vai perceber que ao tentar reproduzir aquela criação, vai aprender muito mais do que conseguiria apenas observando-a.

Por fim, o mais importante: assim como os estudantes de artes não vendem os quadros copiados, não use o layout ou peça que você copiou em projetos seus. A invés disso, tente criar algo novo a partir dessa experiência. Experimente usar as técnicas que você aprendeu reproduzindo outros trabalhos em momentos e situações diferentes, combinando elementos de peças e layouts diferentes. Essa é uma das maneiras mais divertidas de se trabalhar.

Muitas vezes, amigos e pessoas que visitam o Top Rated me perguntam sobre que curso de Design devem fazer ou qual a melhor faculdade de design na minha opinião. Nem sempre tenho uma resposta para essas perguntas e por isso comecei a pesquisar sobre o assunto e perguntar para colegas qual o melhor curso de Design na opinião deles. Conversando sobre o assunto percebi que existem grandes cursos por aí, com ótimos professores e conteúdo. Porém, percebi também que existem algumas coisas, alguns macetes, que só se aprende na prática, no dia-a-dia. Por isso criei esta série de posts, com a qual espero ajudar aqueles que estão começando estudar ou já estão estudando Design.

Tutoriais para Photoshop: 48 ótimos efeitos para fotos

Aplicando efeito “Lomo”

Aplicar o efeito "Lomo" deixa a  imagem com mais contraste e saturação
Aplicar o efeito “Lomo” deixa a imagem com mais contraste e saturação

Trabalhando com blendings e exposure

Exposure blending tutorial results.

Tutorial Tilt-shift avançado

Tilt Shift Photoshop Tutorial: How to Make Fake Miniature Scenes results.

Técnica do falso Tilt-shift

The Tilt-Shift Miniature Fake Technique results.

HDR usando layers

HDR Style Results Using Layers in Photoshop results.

Imagens HDR de alta qualidade

How to Create Professional HDR Images results.

Photoshop HDR Tutorial

Photoshop HDR tutorial results.

Usando a funcionalidade HDR do Photoshop

Using the High Dynamic Range (HDR) Feature in Photoshop CS2/CS3 results

Vignette 2.0

Vignette 2.0 results.

Como usar brilho para dramatizar suas fotos

Adding A Diffuse Glow To Your Images results.

Melhorando paisagens

Improving Landscape Photographs results

Usando máscaras para aprimorar imagens de paisagens

Using Masks To Improve Landscape Images results.

Correção de cor

Color Correction, By the Numbers results.

Correção de cor via Levels

Color correction using levels and eyedroppers results.

Ajuste de cor seletivo

Enhance Your Image with Selective Color Adjustments results.

Como usar contraste para aprimorar as cores de uma imagem

Black & White Is the Key to Better Color results.

Contraste local

Understanding Local Contrast Enhancement results.

Nitidez real usando Unsharp Mask

Sharpening Using an Unsharp Mask results.

Técnicas para uso do Unsharp Mask

Sharpen those photos: Unsharp Mask results.

Reduzindo ruído de imagens escuras

Noise Reduction By Image Averaging results.

A ferramenta Levels

Using the Photoshop Levels Tool results.

Usando as curvas

Using the Photoshop Curves Tool results.

Técnicas de nitidez avançadas

Advanced Photo Sharpening results.

Aplicando efeitos de luz

Add Dynamic Lighting to a Flat Photograph results.

Como combinar imagens

How To Stitch Photos In Photoshop results.

Retoque facial

Super Fast and Easy Facial Retouching results.

Técnica avançada para colorir imagens

Awesome Photorealistic Coloring Techniques results.

Removendo objetos de fotos

Removing Objects From Photos results.

Colorindo imagens preto e branco

Black and White with a Splash of Colour results.

Usando o Channel Mixer

Colour to BW using channel mixer results.

Ajuste rápido para fundos estranhos

Quick Fix for Cluttered Backgrounds results.

Envelhecendo imagens

Antiquing Digital Images in Photoshop results.

Suavizando texturas de pele

Image Retouching: Advanced Skin Softening results.

Combinando smart objects para obter efeitos avançados

Nesting Smart Objects for Multimask Effects in Photoshop results.

Efeito Infravermelho

Infrared Photo Effect In Photoshop results.

Aplicando efeito Tilt-shift simples

How to use Photoshop's Lens Blur tool for tilt-shift fakery results.

Aplicando contraste em partes específicas da imagem

Local Contrast Enhancement results.

Nitidez controlada

Controlled Image Sharpening results.

Composições

Digital Blending result.s

Gaussian Blur

Gaussian Blur results.

Como funciona o Lens correction

Lens Correction filter in Photoshop CS2 results.

Vanishing Point Filter

Getting to Grips with the Vanishing Point Filter results.

Técnicas simples de retoque facial

Quick and Effective Facial Photo Retouching results.

4 Técnincas simples para criar imagens criativas

4 Easy Photoshop Techniques to Make Your Pictures Pop! results.

Método manual para coloração de imagens preto e branco

Hand Colouring A Black And White Photo In Photoshop results.

A maneira correta de converter imagens coloridas em preto e branco

Converting a Digital Color Photo into Black and White results.

Brincando com as cores dos cabelos

Change Hair Color Photoshop Tutorial results.

Criando uma imagem do pôr-do-sol

Creating a sunset effect in Photoshop Tutorial results.

jQuery para iniciantes – Sintaxe e seletores

Sintaxe jQuery

Chamamos esse modo de escrita de sintaxe básica do jQuery. Vamos relembrar, pois é importante entender como ela funciona:

Então podemos dizer que quando usamos o jQuery, sempre selecionamos um dado elemento da página e aplicamos um método a este elemento. Isso significa que boa parte da sua habilidade em programar e desenvolver usando o jQuery depende da sua capacidade em selecionar corretamente os elementos da página. É isso que vamos aprender agora.

Seletores

É possível usar os seletores jQuery para selecionar elementos de várias maneiras diferentes. As três principais são:

– Por tag: Seleciona todos os elementos da mesma tag. Exemplos:
$(‘p’) : Seleciona todos os <p> da página;
$(‘div’) : Seleciona todos os <div>
$(‘a’) : Seleciona todos os <a>

– Por class: Seleciona todos os elementos da mesma classe. Exemplos:
$(‘.linkmenu’) : Seleciona todos os elementos da classe “linkmenu” (Ex. <a class=”linkmenu”>);
$(‘.subtitulo’) : Seleciona todos os elementos da classe “subtitulo”
$(‘.banner’) : Seleciona todos elementos da classe “banner”;

– Por id: Seleciona o primeiro elemento que tenha o id especificado. Exemplos:
$(‘#menu’) : Seleciona o primeiro elemento que tenha o id “menu” (Ex. <div id=”menu”>);
$(‘#titulo’) : Seleciona o primeiro elemento que tenha o id “titulo”
$(‘#rodape’) : Seleciona o primeiro elemento que tenha o id “rodape”;

Combinando seletores

Outra coisa que você pode fazer é combinar esses diferentes tipos de seletores, como você já faz no css.

Sempre que você colocar um seletor na frente de outro separado por um espaço significa que deseja selecionar dentro do primeiro. Por exemplo:
$(‘#menu a’) : Seleciona todos os <a> que estiverem dentro de #menu. Se a página tiver outros <a> fora do #menu, estes não serão selecionados.;
$(‘#menu .sel’) : Seleciona todos os elementos de classe “sel” que estiverem dentro de #menu;
$(‘div #link’) : Seleciona os elementos de id “link” que estiverem dentro de um <div>;

Se você não separar as palavras, selecionará os elementos que contenham a classe ou id especificado:
$(‘div.sel’) : Seleciona apenas as <div> que tiverem a class “sel”;
$(‘div#link’) : Seleciona apenas as <div> que tiverem o id “link”;

Estas são as formas mais básicas dos seletores jQuery. Existem muitas outras opções, operadores e maneiras de selecionar elementos na página, mas por enquanto vamos ficar com essas. Garanto que já é possível fazer coisas incríveis utilizando apenas estes seletores.

No próximo

Seletores são importantes, mas como disse no início, eles representam metade da ‘mágica’do jQuery. No próximo post falarei sobre os métodos jQuery, usados para manipular os elementos que selecionamos.