mar 312018
 

Pois bem, uma excelente ideia mal executada.

O sweetcaptcha, que possibilitava um arrastar e soltar ao invés daquelas letras medonhas, passou por várias fases…ótima, mais ou menos, ruim (quando passou a redirecionar a navegação das páginas wordpress que o utilizavam), até seu fim… Continue reading »

out 252014
 

Muito bem, usamos o Chrome pelo seu excelente console para testes Javascript (acho mais fácil que o do FireBug).

Porém, de uns tempos para cá o Chrome, no Windows 7, para quem fontes da família Helvética instalada, não renderiza corretamente as páginas, exibindo aqueles caracteres estranhosos.

A solução oferecida: desinstalar as fontes, porém, elas são usadas por outras aplicações e, convenhamos, ter que desinstalar fontes por conta de falha do aplicativo? Melhor seria a Google corrigir logo. Enquanto não faz, as dicas:

Tem o problema quem: Tem fontes Helvética Instaladas (neue, sanskrit, a original…), usa Windows 7, tem o Chrome atualizado (parece que foi uma atualização em meados de Julho/2014 que causou a falha) e tenta acessar sites que usam a fonte Helvética (ou família) como padrão. O Chrome simplesmente não renderiza corretamente, independente da configuração de codificação (UTF-8 etc.).

Páginas como Facebook, Pinterest e até do próprio Google, que usam a fonte Helvética aparecem assim:

Pinterest

Pinterest

Facebook

Facebook

O Próprio Google...

O Próprio Google…

 

Para solucionar, instale o complemento StyleBot no Chrome (link para: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha).

chrome4

 

Em seguida cole no aplicativo o arquivo CSS abaixo:

@font-face {
font-family: Helvetica;
src: local('Arial');
}
@font-face {
font-family: "Helvetica Neue";
src: local('Arial');
}
@font-face {
font-family: 'Helvetica Neue Custom';
src: local('Arial');
}
@font-face {
font-family: Helvetica;
font-weight: bold;
font-weight: 700;
src: local('Arial');
}
@font-face {
font-family: "Helvetica Neue";
font-weight: bold;
font-weight: 700;
src: local('Arial');
}
@font-face {
font-family: "Helvetica Neue Custom";
font-weight: bold;
font-weight: 700;
src: local('Arial');
}

Pronto, o Chrome agora, através do complemento, substituirá a família Helvética pela Arial e tudo volta ao normal.

 

A dica foi vista no vídeo do canal Ch-Ch-Check It, e pode ser conferido abaixo, se gostou não deixe de dar o “like” no vídeo do colega (em inglês):

 

 

É isso, até a próxima!

out 242014
 

O causo:

Para uma campanha de entidade beneficente local nos feita a seguinte encomenda:

Será promovida uma festa beneficente, para a qual serão vendidos ingressos, com o objetivo de adquirir uma ambulância para a entidade. A proposta: Colocar na página inicial do site da entidade uma ambulância em preto e branco e, na medida, que forem sendo vendidos os ingressos, no total de 10 mil, a ambulância vai colorindo-se.

Apesar de extremamente simples, não encontramos algo do tipo em nossas pesquisas, assim vamos à solução:

Usar duas imagens sobrepostas, um PB outra colorida, formatadas via CSS, com alterações dinâmicas via jQuery.

Esta é a imagem inicial, com 0% de preenchimento:

ab

Seguida da função que faz a variação:

 

	function colore()
	{
	/*ATENÇÃO:
		Função não otimizada, para efeitos didáticos!
		*/
 
		//captura o tamanho da imagem:
				largura=$('#imagem').width();
				altura=$('#imagem').height();
		//valor (em percentual) do campo:
				percentual=parseInt($('#valor').val(),10);
					//valida o dado recebido, se for inválido, assumirá 50(%)
 
					if(percentual)
					{
						if(percentual<0||percentual>100)
						{percentual=50;};
					}
					else
					{percentual=50};
 
		//calcula o tamnho da imagem, conforme o percentual:
			largura_sobreimagem=parseInt(largura*percentual/100);
			altura_sobreimagem=parseInt(altura*percentual/100);
 
		//atribui o valor à sobreimagem:
			css_sobreimagem="clip:rect(0px,"+largura_sobreimagem+"px,"+altura_sobreimagem+"px,0px)";
 
			$('#imagem').css({"clip":"rect(0px,"+largura_sobreimagem+"px,"+altura_sobreimagem+"px,0px"});
		/*
		No caso, a sobreimagem varia na vertical e na horizontal, apenas para demonstrar as possibilidades do efeito,
		na prática, foi usado somente na horizontal para melhor visualização.
		No estilo acima, a imagem já começa como "meio colorida" apenas para efeito demonstrativo
		*/
 
	};

Chegando a este resultado:

ab2

 

Pronto, simples e rápido.

Aqui os arquivos para download: .imagem_sobre_imagem

(A imagem da ambulância é promocional da FIAT/Ducato)