TidBits

A maioria das pessoas (inclusivo programadores front end) vê alguma aplicação onde é possível desenhar e pensa que é algo do capeta, complexo e precisa de 1 ano pra fazer, mas provavelmente ninguém nunca tentou. É simples!

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,

Novos efeitos em css3 vão sendo adicionados. Por enquanto por causa do translate 3d, somente webkit reproduzem isso (resumindo só funciona em Google Chrome e Safari).

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.

Pedimos por anos a morte do IE6 e hoje considero ele morto, mas e aí? Agora é começar a xingar o IE7 e fazer as mesmas coisas? Nem tanto, algumas possibilidades que não usávamos, podem ser exploradas.

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é?

Eu uso Firefox como browser default desde 2005 quando a Mozilla Foundation lançou a versão 1.5 do navegador, que na época tinha como principal rival o Internet Explorer 6, da Microsoft, que chegou a atingir 99% do market share mundial dois anos atrás, em 2003.

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: