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

Todo mês o SINDPD por regra fica com 30 reais do seu salário. E pra que isso não ocorra só tem uma forma: você tem que escrever uma carta num modelo que eles criam e trocam todo ano e levar pessoalmente duas cópias assinadas ao sindicato, em horário comercial obviamente e você só pode fazer isso nas duas primeiras semanas do ano (período em que normalmente pessoas felizes tiram férias). Se você não entregar até a segunda sexta feira do ano aí já era. No estilo “perdeu playboy” mesmo. Até dezembro você vai perder 30 reais todo mês por não ter levado a cartinha deles.

O processo todo é feito pra você não conseguir entregar o documento a eles. Afinal, é só pensar um pouco: Sindicato de Tecnologia da Informação ter que levar uma carta, pessoalmente, pra eles carimbarem, é ridículo. Qualquer programador podia fazer um sistema básico pra todo mundo poder autorizar ou não, de casa ou do trabalho, o dinheiro tomado por eles. Mas não, e são filas longas (ano passado eu perdi 2 horas e meia na fila que dava uma volta no quarteirão).Pra intimidar, eles colocam cerca de 30 seguranças pra não deixar ninguem “dar pitizinho”. E funciona assim: quanto mais gente voltar pro trabalho ao invés de perder meio dia de serviço pra entregar um papel, melhor (mais dinheiro) pro sindicato.

Além disso, no modelo da carta, é necessário colocar seu e-mail lá. Não vejo outro motivo pra eles ter seu e-mail a não ser vender a base, já que somos obrigados a ir pessoalmente lá.

Eu me recuso a deixar 330 reais na mão do sindicato ( 30 reais x 11 meses, em janeiro é cobrado de toda forma, levando cartinha ou não) e quem trabalhar em alguma empresa que também responde ao SINDPD deveria fazer o mesmo. O modelo da carta de 2012 está aqui.

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,

Parece inútil, mas se parar pra pensar. Em sites mobiles ou pra tablets, isso funciona praticamente em 100% dos acessos.

Veja o efeito, com o mínimo de código possível:

Pra quem se interessou, pode fazer download do exemplo aqui.

E a grande notícia é que o uso de IE7 vai caindo drasticamente. Hoje segundo a global stats, IE6 no Brasil está na casa de 8%, enquanto IE7 bate cerca de 5% do total.

Então, veja a gama de features que podemos usar se não formos nos preocupar com o IE6.

• CSS Attribute selectors
• min-height / max-height / min-width / max-width
• General Sibling Selector
• Float Left + Margin Left
• border-color: transparent
• Porcentagem na margin / padding
• position:fixed
• png24
• :hover em qualquer elemento
• > no css (filho direto)

Veja uma pequena apresentação que fiz falando de cada uma dessas features:

Mas e o FDP que ainda usa IE6?

Recomendo usar o IE7.js que minimiza os bugs do browser, vai rodar tipo LENTO, mas se o cara ainda usa IE6, não deve ser alguém muito preocupado com performance, né?

A ideia do navegador aceitar extensões desenvolvidas por qualquer programador fez o Firefox crescer rápido até que em 2006, a Microsoft que havia decidido não mexer mais em seu browser, anunciou que iria trabalhar numa nova versão do navegador, o Internet Explorer 7. A Mozilla comemorou esse dia afinal, se eles chegaram ao ponto de incomodar a gigante Microsoft, significava que eles estavam indo muito bem, mandaram até um bolo pra eles.

Com as extensões, muitas possibilidades foram agregadas no browser, aplicações que mandavam email de forma mais simples ou que possibilitavam pausar downloads diretamente do navegador ou então baixava vídeos do Youtube e já convertia o .flv pra uma extensão diferente, entre outras que usamos até hoje como o Firebug, Web Developer Toolbar, HTML Validator, etc.

Só que todas essas novas features tiveram um peso: a memória RAM, que vaza até hoje como água na peneira enquanto usamos o Firefox. Veio a versão 2 que prometia resolver isso e #fail, veio a versão 3, 3.5, 4, 4.1, 5, 6 e 7 (entre outras intermediárias) e todas também levaram um big #fail quando o assunto é gerenciamento de Memória RAM. Veio então o Google Chrome há alguns anos atrás, que também possibilitava múltiplas abas e centenas de extensões, imaginávamos outro problema de RAM, mas nada disso, fizeram um bom trabalho.

E como funciona o gerenciamento de memória do Firefox?

É mais ou menos assim:

E o que dá pra fazer?

Muitas pessoas estão “migrando” pro Chrome mas apesar disso, pra mim, o Firefox ainda é o melhor navegador pra desenvolvedor de interface.

Desinstalar extensões que não usamos muito, pode aliviar um pouco. E existe uma extensão também chamada “Memory Restart” que avisa quantos megas (ou gigas) o Firefox está usando, e quando começa a crescer muito, a extensão avisa que está na hora de reiniciar o browser.

De resto, só podemos aguardar a Mozilla Foundation melhorar o principal produto dela, dizem que no Firefox 8 vai estar melhor (assim como falavam no Firefox 2). Até lá, o Firefox continua assim:

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.

E as aplicações neles estão crescendo. Listei 10 sites e experimentos de programadores (isso significa sem design nenhum) fuçando novas possibilidades pro Google Maps:

1 – Dual Maps

Aplicação que sincroniza o Google Maps, o StreetView e a visão aérea do mesmo local.

2 – Stas Kulesh

Monta um mosaico de fotos do Flickr no Maps e deixa navegar nele.

3 – Valor do Taxi

Escolha dois endereços e o site calcula a rota e um valor aproximado de uma viagem de taxi do ponto A ao B.

4 – MegaFoto

Aquele esquema de gigafotos é possível fazer usando o google maps.
Nesse caso eu que fiz um teste (#VaiCorinthians). Mas teve algum site que já usou isso comercialmente mesmo.

5 – Pop Places (Made In Web)

Uma espécie de game / site interativo, que traça uma rota pra você pilotar um avião dentro do maps. Foi desenvolvido como um case pra um concurso de HTML5 do Google.

6 – Rota animada

Percorre uma rota animada com um carrinho feio do ponto A ao ponto B.

7 – TwitterVision

Na verdade quando fui tirar o print não estava funcionando, mas basicamente ele procurava algo no twitter, identificava o lugar de origem do post e apontava no mapa onde foi postado (movendo o mapa) e aparece a mensagem do tweet com a foto de que publicou. O efeito é legal. Fiz algo parecido pra click em 2009 mas acabou não sendo aproveitado.

8 – Los Angeles Firemap

Quando houve o grande incêndio em Los Angeles, o site Los Angeles Times publicou um mapa estilizado, desenhando os pontos de risco, pontos de evacuação, etc.

9 – ShowStreet

Site que mostra o Google Maps sincronizado com o StreetView

10 – Guiarte

Pega fotos do próprio maps e adiciona no mapa antes de ter que escolher o local.

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