nov 022014
 

Muito bem, direto ao problema:

Qual codificação de caracteres utilizar em seus aplicativos? Qual o Charset ideal?

Se usa algum framework, como Bootstrap e ou jQuery por exemplo, melhor usar UTF-8. Na Academia nosso padrão é UTF-8 sem BOM.

Porém, a maioria dos windows usa o padrão ISO 8859-1, causando os transtornos das imagens abaixo quando alguma de nossas configurações foi esquecida (em especial no Internet Explorer):

Capturar

Na imagem, a tela da mesma aplicação no Firefox é interpretada corretamente como UTF-8, O mesmo no Chrome, já no I.E…..aparece desconfigurado.

Cabe apontar que a página HTML informa corretamente a codificação:

html

Porém, nada feito! o I.E. Não reconhece….

E aqui mais uma dica, a declaração de charset deve estar dentre as primeiras no HEAD, na Academia por padrão usamos como a primeira, pois esta declaração deve estar dentre os primeiros 1024 bytes do arquivo, registrando a dica: Evite comentários demasiados no início do HTML, mais pode ser visto em: http://www.w3.org/International/questions/qa-html-encoding-declarations.en

A solução?

Usar um “hack” nos arquivos PHP, no início de cada arquivo PHP que retorna conteúdo utilizamos (também por padrão) a declaração:

header('Content-Type: text/html; charset=UTF-8');

Tal comando não necessária precisa estar no início do arquivo (o fazemos por questões de padronização).

E quanto ao UTF-8 com ou sem BOM?

O BOM, ou Byte Order Mark é um conjunto de caracteres enviados no início de cada arquivo codificado em UTF-8 com BOM. Tal conjunto tem utilidade no UTF-16 ou 32, sendo inútil no 8. Além de inútil ainda traz alguns problemas: com o BOM não é possível utilizar os comandos header do PHP, além de provocar retornos indevidos em aplicações AJAX, como na imagem abaixo (aliás, estes caracteres são o BOM…):

Byte Order Mark

 

Então, o resumo de como padronizamos cá na Academia, evitando muitos problemas:

  1. Todos os nossos editores de texto e IDE são configurados para adotar o UTF-8 sem BOM como padrão.
  2.  Todos os arquivos HTML tem a declaração de charset no início do Header, dentro do limite de 1024 bytes;
  3. Todos os arquivos PHP que retornam algum HTML tem a declaração  “header(…” no início do arquivo;
  4. Os bancos de dados são configurados como collation UTF-8 general_ci (no caso do MySQL).

Isto feito, raramente terá problemas com os malditos charset, principalmente no I.E..

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