Parece algo mínimo, mas irrita profundamente quem está acostumado a trabalhar da forma correta.

Porque forma correta? Simples, porque pode dar erro se colocar a chave na linha de baixo.

Pensem na função abaixo getUser que retorna um objeto em JavaScript

function getUser(){
	return {
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna um objeto

Se fosse pra deixar a chave embaixo, ficaria assim:

function getUser()
{
	return
	{
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna undefined

Só que há um problema: pelo fato do ponto e vírgula indicando quebra de linha ser no JavaScript ser opcional, o return não entende que é pra retornar um objeto e encerra a função ali, retornando undefined.

E tem um caso pior, que simplesmente dá erro de sintaxe:

function getPosition()
{
   return
   {
       top:32,
       left:50
   }
}
// dá erro "SyntaxError: Unexpected token :"

E se fosse feito com os braces na linha de cima, daria certo.

O incrível é que mesmo com esse argumento, tem programador que não dá o braço a torcer e insiste dizendo que JavaScript veio do java e no java se programa assim. ERRADO, JavaScript veio de Scheme e qualquer livro de Padrões em Javascript vai aconselhar abrir o bloco com a chave na linha de cima.

Dá pra configurar isso no Visual Studio 2010 (no 2008 deve dar também).

Obviamente precisa de um belo work-around pra funcionar em interfaces touch e o pior, versões antigas de IE. Mas a ideia em si é simples, basicamente no mousemove em cima do canvas você escreve uma linha com o LineTo, veja abaixo como ficou:

Bom, vamos aos códigos:

HTML

Criando a tag canvas e deixando uma mensagem caso o usuário não tenho um browser compatível com HTML5.

<canvas id="canvas" class="canvas" width="400" height="400">
    Seu browser não suporta canvas, é hora de trocar!.
</canvas>

Javascript

São só 29 linhas (bem indentadas e organizadas) de javascript

var Draw = {
	obj : document.getElementById('canvas'),
	contexto : document.getElementById('canvas').getContext("2d"),
	_init:function(){
		Draw.obj.onmousemove = Draw._over;
		Draw.obj.onmousedown = Draw._ativa;
		Draw.obj.onmouseup = Draw._inativa;
		Draw.obj.onselectstart = function () { return false; };
	},
	_over:function(e){
		if(!Draw.ativo) return;
		Draw.contexto.beginPath();
		Draw.contexto.lineTo(Draw.x,Draw.y);
		Draw.contexto.lineTo(e.layerX, e.layerY);
		Draw.contexto.stroke();
		Draw.contexto.closePath();
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_ativa:function(e){
		Draw.ativo = true;
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_inativa:function(){
		Draw.ativo = false;
	}
}
Draw._init();

CSS

Basicamente, é adicionar o cursor no elemento Canvas

#canvas{ cursor: url("../img/pencil.gif"), default; }

Então, não parece tão complicado, parece?

[]s,

Quando se fala em jogos e animações, pensamos em quantidade de frames por segundo, ou seja, quantas vezes por segundo algo vai mexer na tela.

Uma quantidade razoável pro trabalho não ficar “pesado” ou “travado” é cerca de 30 frames por segundo. Enquanto o máximo que o olho humano consegue distinguir é em torno de 60 frames por segundo, ou seja, não adianta fazer uma animação com intervalo de 10 milisegundos, seu olho não vai enxergar isso.

Antes, pra fazermos uma animação, trabalhávamos com o setInterval fixo de X milisegundos, ou então, criavamos e chamavamos uma função que se auto-invocava novamente com setTimeout também com um valor fixo de X milisegundos. O problema é que esse X de milisegundos varia de acordo com cada browser, cada processador e alguma hora acabava ficando ou muito lento, ou muito rápido.

Hoje, é possível trabalhar com o requestAnimationFrame, e ao invés de você gerenciar intervalo para o processamento, o browser faz isso.

Imaginem uma função onde algo, sei lá, um boneco, ande.

Como seria com setTimeout?

funcion mover(){
    var boneco = document.getElementById('boneco');
    boneco.style.left = (parseInt(boneco.style.left.replace('px','')) + 2).toString() + 'px';
}
setInterval(mover,20); // reinvoca a cada 20 miliseg.

Já com requestAnimationFrame seria assim:

funcion mover(){
    var boneco = document.getElementById('boneco');
    boneco.style.left = (parseInt(boneco.style.left.replace('px','')) + 2).toString() + 'px';
    mozRequestAnimationFrame(mover);
}
mover();

Nesse caso funcionaria só pra Firefox, mas tem uma função já que funciona cross-browser e pra usuários de browsers sem HTML5 tem um work-around com setTimeout:

window.animationFrame = (function(){
	return	window.requestAnimationFrame       ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame    ||
		window.oRequestAnimationFrame      ||
		window.msRequestAnimationFrame     ||
		function(/* function */ callback, /* DOMElement */ element){
			window.setTimeout(callback, 1000 / 60);
		};
})();

Nesse caso, ficaria assim:

funcion mover(){
    var boneco = document.getElementById('boneco');
    boneco.style.left = (parseInt(boneco.style.left.replace('px','')) + 2).toString() + 'px';
    animationFrame (mover);
}
mover();

Detalhes

Quando você troca de aba com o requestAnimationFrame, o processamento da animação / jogo / whatever é pausado na hora, e quando você volta, ele retorna.

Já no setInterval, hoje, pra dar uma melhor performance nos browsers, a maioria deles quando você troca de tab, ele automaticamente aumenta qualquer setInterval pra 1000 milisegundos se você ter declarado menos do que isso, e retorna ao valor inicial quando a aba é ativada novamente

Mas o uso maior do console, é pra debugar javascript mesmo.

Vou listar alguns comandos, funcionam tanto no Firebug pro Firefox, quando no “Developer Tools” do Google Chrome

console.log ou console.debug

Sintaxe: console.log(variaveis);
Serve para: debugar variáveis no javascript ao invés de colocar 300 alerts

Até hoje, nunca descobri a diferença (se é que existe) entre os dois métodos.
Um detalhe que pouca gente sabe, é que é possível passar infinitos argumentos nessa função.

var nome = 'Danilo';
var sobrenome = 'Augusto';
var nome_completo = nome+' '+sobrenome;
console.log(nome_completo);
// Danilo Augusto
console.log('nome:',nome);
// nome: Danilo
console.log('nome:',nome,' e sobrenome: ',sobrenome);
// nome: Danilo e sobrenome: Augusto

console.dir

Sintaxe: console.dir(objeto);
Serve para: debugar um objeto, mostrando todos os childs dele

var posicoes = {
    left:10,
    top:50
}
console.dir(posicoes);
// left	10
// top 50

Ou então:

console.dir(document.getElementById(‘menu’));

retorna tudo sobre o elemento:

copy

Sintaxe: copy(variavel);
Serve para: copiar uma variável para a área de transferência do sistema operacional (funciona como um ctrl+c)

copy(document.getElementById('erro').innerHTML)

$0

Sintaxe: $0
Serve para: retornar o objeto selecionado/inspecionado no próprio firebug.

$0.style.display = 'none';

$$

Sintaxe: $$(expressao)
Serve para: retornar um ou mais objetos através de um seletor.

Funciona como o $ do jQuery. Então, é ideal pra testar em sites que não usam jQuery (sacou? sacou?).

$$('#footer').style.display = 'none';

inspect

Sintaxe: inspect(elemento)
Serve para: inspecionar no próprio firebug um elemento HTML.

Funciona como o $ do jQuery. Então, é ideal pra testar em sites que não usam jQuery (sacou? sacou?).

inspect($$('#footer'));

Acho interessante quem gostou do assunto dar uma olhada num vídeo do Paul Irish em que ele demonstra essas e outras funções do console do firebug.

• 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.

Vamos aos códigos…

Callback no Like Button

Dos três botões, o único que tem frescura é o do Facebook, pois ainda que você faça tudo no JavaScript, ele te obriga a criar uma app lá no canal de desenvolvedores deles, vai lá, criar uma App só pra pegar o ID. Além disse também tem a frescura de precisar colocar o atributo xmlns:fb=”http://www.facebook.com/2008/fbml” dentro da sua tag <html> .
E dentro do seu <body> (que gay isso), no lugar onde você vai colocar o like button, adicione:

<div id="fb-root"></div>
<fb:like></fb:like>

E lá no fim do body, em javascript:

	window.fbAsyncInit = function() {
		FB.init({appId: 'SUA_APP_ID', status: true, cookie: true, xfbml: true});
		FB.Event.subscribe('edge.create', function(href, widget) {
			alert('Você acabou de curtir a página: '+href);
		});
	};
	(function() {
		var e = document.createElement('script');
		e.type = 'text/javascript';
		e.src = document.location.protocol + '//connect.facebook.net/pt_BR/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());

E vai funcionar assim:

Clica aí em like, e depois que você efetivamente compartilhar, vai dar um alert de callback, obviamente poderia ser qualquer outra coisa, como usar uma tag do analytics, ou dar show/hide numa div, sei lá.

Callback no Tweet Button

Tem um detalhe só, tem um script que necessariamente tem que estar dentro da tag <head> :

<script src="http://platform.twitter.com/anywhere.js" type="text/javascript"></script>

No demais, sem segredo, onde você for colocar o tweet button é só colocar o seguinte html

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="maktuiu">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
	twttr.events.bind('tweet', function(event,user) {
		alert('Você twittou pelo tweet button =)');
	});
</script>

E vai funcionar assim:

Tweet

Testa aí, é a mesma coisa do Like button.

Plus One Button

Sem frescuras, simples e além de saber se alguém clicou no +1, dá pra saber se alguém desclicou depois:

O código é este:

<g:plusone annotation="inline" callback="PlusOneCallBack"></g:plusone>

<script type="text/javascript">
	function PlusOneCallBack(obj){
		if(obj.state=='on'){
			alert('você clicou no +1');
		} else {
			alert('você desclicou no +1');
		}
	}
	(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>

E vai funcionar assim:

FAQ

• Não dá pra saber, nos 3 casos, dados da pessoa que compartilhou (como foto, nome, perfil, senha do banco, etc), pra acessar dados do perfil é necessário pedir permissão no applicativo, e aí é obrigado a passar por aquele pedágio “O aplicativo tal que saber suas informações de blablabla”. Não é essa a intenção de quem quer simplemente compartilhar um conteúdo.
• Pro orkut, naquele “Promova” não sei se tem algo do tipo ou não, e também não estou muito interessado em ir atrás.

Bom, é isso.

[]s,

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.

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.

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!

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.

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!

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.

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

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.

Mas, 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.

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.

Porém, nessa edição o formato foi diferente, o tema era HTML5 e os convidados foram o Élcio da Visie (empresa de treinamento e desenvolvimento web que vai oferecer um curso de html5) e a AgênciaClick, onde esteve presente eu (Programador de Interface), Robson Dantas (Gerente de Tecnologia) e Ricardo Murer (Diretor de Tecnologia).

Durante a nossa apresentação, mostramos alguns protótipos de estudos que fizemos aqui na AgênciaClick, entre eles um player usando a tag <audio> simulando a interface do winamp e um jogo simulando o Guitar Hero:

O jogo está disponível aqui. Funciona para Chrome 5+, Ópera 10.5+, Safari 5+ e Firefox 3.5+ (sendo que para Firefox, é necessário estar hospedado em um servidor, ou seja, se você abrir o html como um arquivo, não funciona por questão de segurança do Firefox).

O jogo usa os conceitos de <audio> e <canvas> do HTML5, CSS3 e bastante javascript. Eu desenvolvi o game em 4 dias, ou seja, dá pra melhorar muito, devo aprimorar o código, colocar Ranking Online, mais músicas, etc.

Mas a idéia inicial era mostrar que pode ser feito um jogo em html5, com 20kb de JavaScript que antes só era possível ser desenvolvido em flash.

Pra iniciar, fiz um jogo simples daqueles que todo celular tem, usando somente o elemento Canvas.

O Canvas funciona como se fosse um “shape” do photoshop, você cria um elemento e lá você pode desenhar literalmente, circulos, quadrados, linhas, pontos, colocar backgrounds, usar degradê, etc.

O Canvas não dá suporte ao ie6, ie7 e ie8. Existe um elemento similar pra eles chamado “shape” e existem algumas libs em javascript que traduz automaticamente tudo o que for desenhado em canvas pra shape, ou seja, você chama o js que ele se vira com o resto. No caso, usei o explorercanvas (dica do Koji), mas também tem o html5.js e o canvas.js disponível pra gente usar.

O jogo é bem simples, não tem muitos recursos, poderia ter ranking, som, opções e um monte plus mas não era essa a intenção do primeiro post sobre html5. O jogo tem 8kb (somando html / css e javascript ) pros browsers que suportam canvas e 19kb para os que não suportam. não usa nenhum framework de javascript (do tipo jquery, mootols, prototype) e não faz requisição de nenhuma imagem, tudo que está na tela foi desenhado em canvas com javascript.

Deixei disponível o código fonte e para jogar é só clicar na imagem ou entrar aqui

Por sinal, recomento o Chrome ou Opera 10.5 que são os browsers mais rápidos da atualidade.

Quem jogar, fala quantos pontos fez.
=)