Adicionando callbacks por JavaScript no tweet button / like button / +1 button

Imaginei vários cenários em que isso pode ser útil, basicamente adicionando uma função de callback no JavaScript após twittar ou dar like / curtir ou apertar o botão mágico que o Google inventou, que quando você clica soma 1 (HÁ!), enfim, pode evitar que você precise programar server-side e se preocupar com oauth, e os malditos tokens, ou seja, dá pra fazer tudo no JavaScript, tipo:

  • Como trackear ou como colocar tags do Google Analytics no tweet button , like button e +1 button, mensurando o compartilhamento de cada post, página ou sessão do site nas redes sociais.
  • Aplicações do tipo, pague com um tweet, ou compartilhe para fazer o download, liberando um conteúdo, uma foto um vídeo ou qualquer arquivo somente depois que o usuário efetivamente compartilhar a página no Twitter, Facebook ou Google Plus.
  • Fazer coisas bregas do tipo “Obrigado por compartilhar“, tem gente que adora isso, sério.

Continue reading

Ambientes 3D usando HTML5 e Javascript com Canvas

Já ouvi dezenas e dezenas de programadores de interface dizendo que Flash vai morrer com o html5, do mesmo jeito que flash ía morrer quando jQuery se tornou popular. Entretanto, a intenção da W3C, é sim tanto Flash quanto Silverlight e Unity serem “desnecessários”. Segundo eles, um browser deve ser auto-suficiente e não é correto este cenário de hoje onde precisamos de algum plugin pra ter uma funcionalidade extra no navegador. Todas as funcionalidades deveriam estar incorporadas no browser. Com o HTML5, CSS3 e Javascript V8 podemos (ou poderemos) trabalhar com áudio, vídeo, webcam, aceleração por hardware, armazenamento offline, etc… talvez esse cenário de “flash morrer” vire realidade um dia daqui uns 10 anos, quem sabe? Porém, até isso acontecer, temos que evoluir muito em Javascript, MUITO! Frameworks 3D em javascript estão começando a aparecer. E com o “apoio” da apple ao HTML5 simplesmente bloqueando o flash nos Ipads / Iphones, parece que agora é o momento ideal para o “Programador HTML” se tornar uma profissional respeitado e bem pago no Brasil, assim como já é nos Estados Unidos e na Europa, ou será que vão “botar o estágiário que faz mail marketing” pra fazer uma aplicação 3D usando o Notepad++ ?

No post de hoje, não vou falar de código, só quero mostrar parte do que temos atualmente de mais avançado em html5 / javascript. Vou mostrar alguns cases de ambientes 3D programados em javascript com o auxilio de Canvas:

3DTim

Impressiona! Feito em canvas, a aplicação permite desenhar objetos 3D e manipular tanto o objeto quanto a câmera, visualizando o objeto criado em qualquer ângulo. Além de Canvas, o case explora outras propriedades de html5 como armazenamento offline e as novas propriedade / métodos de Javascript.

aplicação permite desenhar objetos 3D em HTML5

Canvas 3D

Usando canvas, a aplicação mostra uma espécie de exposição de fotos em 3D e roda bem. Na minha máquina com Firefox com 20 extensões, batia em média 28 frames por segundo. No chrome 8 / IE9 batia 44 frames por segundo, navegando e andando em 3D.

exposição de fotos em 3D com HTML5

Wolfenstein 3D com DOM

O primeiro foi feito por programadores do Opera, é uma simulação do Wolfenstein 3D feito com Javascript manipulando objetos em DOM e em Canvas, eles fizeram um tutorial passo a passo de como desenvolveram o jogo. O game roda bem, porém como foi feito em DOM, o processamento dele é meio pesado. Manipular tantos objetos ao mesmo tempo é complicado. Se fosse feito em canvas rodaria muito melhor, em compensação roda (lento e sem o mapa) até em IE6!

Wolfenstein 3D em Javascript

Mandatory upgrade (Parallax 3D)

Outro case no dhteumeuleu, o que mais impressiona é que foi feito em abril de 2008! Quando html5 engatinhava, já tinha gente em jobs complexos usando canvas.

Parallax 3D com canvas

Wolfenstein 3D com 1kb de Javscript

Este foi um case para o JS1K, um concurso que desafiava criar coisas mais interessantes usando apenas 1kb de js. E conseguiram fazer um ambiente 3D em Javascript. É tosco, ok, mas tem 1kb!

Wolfenstein 3D com 1kb de Javscript

Canvas 3D engine

Um experimento feito com uma lib para aplicações 3D em javascript chamado Clay3D, é simples a lib e fornece diversos métodos para criar e manipular objetos de diversas formas geométricas além de permitir rotacionar a câmera em qualquer ângulo / zoom.
Canvas 3D engine

Se alguém lembrar de algum case do tipo que eu não mostrei, deixe comentário. =)
[]s,

Introdução ao <canvas> – um objeto girando

Acredito muito em <canvas> por ser uma tecnologia que já está no mercado a bastante tempo e boa parte dos browsers já aceita. O único browser que dá problema, vamos lá, adivinhem…. sim, é o Internet Explorer, nas versões  6, 7 e 8 porém eles tem o objeto deles (do famoso padrão Microsoft “me deu na telha criar isso”), chamado shape, esse objeto não é igual ao canvas, tem menos métodos, mas dá pra criar algo nele.

Mas existem frameworks, como o explorer canvas, que traduzem um código javascript que é feito em canvas, pra shape, ou seja, na teoria o Internet Explorer não é um problema pra desenvolvermos em canvas. Na teoria, já na prática alguns métodos não funcionam, como degradê radial e escrever texto em canvas também dá problemas.

copy of tidbitsMas, ainda assim, graças ao mercado de mobile e tablets que não tem suporte ainda direito a flash, o uso de canvas pra interfaces de navegação ou até mesmo jogos. No site Canvas Demos dá pra ver dezenas de aplicações em canvas que se pode se comparar muito facilmente com sites feitos em flash. Porém são mais acessíveis, muitas vezes até pro IE6.

Vamos programar um pouco:

HTML

Só adicionar no seu html

	<canvas id="canvas" width="300" height="300">
		Seu browser não suporta canvas
	</canvas>

Javascript

// função que move um objeto em circulos calculando x e y
var fx = function(centro_x, raio, incremento){ 
    return (centro_x + raio*Math.cos(incremento/20)) 
}
var fy = function(centro_y, raio, incremento){ 
    return (centro_y + raio*Math.sin(incremento/20)) 
}

// Contexto trata-se do estado objeto canvas
var contexto;

// O incremento é o que faz o objeto girar;
// se você calcular fx() com 0
// e depois calcular fx() com 1, 2, 3... etc
// a funcao retornará uma posição de X em forma de círculo
// e a mesma coisa com fy();
var incremento = 1; 

var Canvas = {
	// iniciando o objeto
	_init:function(){
		// Instanciando o contexto do canvas 
		// numa variavel global
		contexto = document.getElementById('canvas').getContext("2d");
		// aqui eu peço pra funçao que vai posicionar 
		// o canvas ser chamada a cada 30 milisegundos
		return setInterval(Canvas._preencher, 30);
	},
	_preencher:function(){
		// apagando o que tinha no canvas
		// não é possível desenhar um objeto no canvas 
		// e depois mover ele pra isso é necessário 
		// apagar o conteudo do canvas
		// e desenhar tudo novamente 

		contexto.clearRect(0,0,300,300);

		/* CRIANDO UM QUADRADO COM DEGRADÊ */
		// inicia o desenho
		contexto.beginPath();
		// cria um degradê
		var my_gradient = contexto.createLinearGradient(300, 0, 0, 300);
		// adiciona a cor de inicio
		my_gradient.addColorStop(0, '#ff5');
		// adiciona a cor final
		my_gradient.addColorStop(1, "#f60");
		// adiciona o degradê ao estilo do contexto
		contexto.fillStyle = my_gradient;
		// cria um quadrado 300x300 na posicao 0x0
		contexto.fillRect(0, 0, 300, 300);			
		// fecha o desenho
		contexto.closePath();
		
		
		// CALCULANDO X E Y DO OBJETO
		x = fx(150, 100, incremento);
		y = fy(150, 100, incremento);

		// acionando o incremento
		incremento++;		

		// o incremento não precisa ser maior 
		// do que PI * 2 * Numero de vezes 
		// que vc quer pra dar uma volta
		// assim fica mais facil e rapido pro js
		// trabalhar com 0 a 63
		// do que 0 a infinito
		if( incremento == Math.PI * 2 * 20 ) incremento = 0
		
		// CRIANDO O CIRCULO
		// redefinindo o estilo do canvas pra pretro
		contexto.fillStyle = "#000000";
		// inicia um novo desenho
		contexto.beginPath();
		//  criando o circulo
		contexto.arc(x, y, 10, 0, Math.PI * 2, true); 
		// preenchendo a cor dele
		contexto.fill();
		// fecha o desenho
		contexto.closePath();
	}
}	
// iniciando nosso js
window.onload = Canvas._init;

Resultado

E depois disso dá pra brincar, vejam outros exemplos que eu fiz, deu pra usar o explorer canvas, ou seja, é acessível pra todos os browsers, desde ie6 até iphone:

Com sombras

Estilo Vitrine

Quem se interessar, deixei todos os exemplos disponíveis pra download.

Winamp em HTML5 e Javascript

A alguns meses atrás eu fiz uma série de experimentos em HTML5, um deles foi um player de áudio simulando o bom e velho winamp.

Foto do player de winamp em HTML5 rodando no Opera

O que tem de HTML5?

Pouco, tem a tag audio, drag and drop eu comecei a fazer pra controlar o volume.

Pesa pouco, na verdade usei o jQuery, fora isso são 14kb de js.

O player aceita todos os atalhos do Winamp :

Z > Volta Música
X > Play
C > Pause
V > Stop
B > Avançar Música

-> (Seta para direita) > Avança 5 segundos
<- (Seta para esquerda) > Volta 5 segundos

Scroll do Mouse > Aumenta e diminui o volume

O player roda no Chrome 5.0+, Firefox 3.6+ (porém no Firefox, por segurança deles, só roda se tiver num servidor, não adianta tentar abrir o html), Opera 10.5+, Safari 5+.

Pra quem quiser dar uma olhada, ou contribuir com algo, deixei o player disponível para download aqui. Como tem músicas em ogg e em mp3 (por causa do Safari que não roda .ogg), são 16mb pra baixar.