TidBits

O Visual Studio, além de ser uma IDE mega pesada, tem um problema que gera intrigas entre equipes: ele abre por padrão uma função no JavaScript colocando a chave na linha de baixo.

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

Nessa sexta-feira, teve um café com browser, um evento sediado pela w3c Brasil onde ela convida fabricantes de browsers a falarem dos seus produtos, por lá já passou o pessoal do Ópera, Firefox e até da Internet Explorer.

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.

Nos próximos posts vou escrever um pouco das experiências em html5 que ando fazendo.

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.
=)

É um serviço relativamente novo, pouco usado, mas muito interessante.

A ferramenta de idiomas do Google, acredito que todo mundo já conhece. Porém pouca gente sabe que o Google oferece uma API em ajax para tradução.

E pra facilitar ainda mais, existe também um plugin de jQuery chamado jquery-translate que interage com a API do google, aí fica bem simples:

Para traduzir um texto basta chamar o node do html pelo seletor do jQuery e chamar a função translate:

	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery-translate-1.3.9.min.js"></script>
	$(document).ready(function(){
		$('button#traduzir').click(function(){
			$('div#texto').translate('en')
		});
	});

No exemplo acima, quando clicarem no botão traduzir, irá traduzir todo o conteúdo da div id=”texto” para o inglês, a API do Google detecta automaticamente o idioma original.

Veja um demo abaixo que eu fiz:

Clique em uma das bandeiras abaixo do texto para traduzir para o idioma selecionado:

Quem quiser entender, deixei o exemplo disponível pra download.