A carta ao SINDPD pra não roubarem 30 reais do seu salário todo mês

Trabalho em agência em publicidade e, em São Paulo, algumas delas respondem ao Sindicato dos Publicitários enquanto outras (normalmente com maior tempo de vida) respondem ao Sindicato dos Trabalhadores em Processamento de Dados e Tecnologia da Informação, o chamado SINDPD e essas sim sofrem.

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.

Fila no 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.

Desenhando com a tag canvas em HTML5

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,

Transição de Flip usando CSS3

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.

IE6 morreu, e agora? O que dá pra fazer diferente no HTML / CSS?

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

« Próximos posts Posts Anteriores »