out 272014
 

O problema:

Temos um formulário que deve ser aberto para a edição, sendo que os dados são populados para o form via jQuery/AJAX/PHP/Mysql.
Resta um problema nos selects, como selecionar a option correta, de acordo com o que está armazenado no banco de dados?

A solução:

$("#eixo option:contains('"+valor_que_vem_do_banco+"')").attr('selected',true);

Pronto, a option que contém o valor que veio do banco será selecionada no Select indicado.

out 262014
 

O problema:

Temos uma aplicação com um form bastante complexo que, quando aberto para edição, preenche os dados via AJAX e, conforme for o resultado do AJAX e as permissões do usuários, ações possíveis são habilitadas.

O código usado (inicialmente):

$( document ).ready(function() {
 
	preenche_form();
	exibe_botoes();
	preenche_tema($('#acao_eixo'));
});

Porém, ocorre o seguinte: A função preenche_form(), que realiza a consulta via AJAX demora mais que as outras, assim, a função exibe_botoes() é executada antes do preenchimento do form, gerando um resultado indesejado pois, para habilitar os botões corretos, a exibe_form() depende do preenchimento da preenche_form().

Os botões a serem habilitados (um conjunto conforme o status preenchido no form pela função preenche_form()):

botoes

 

Num primeiro momento tentamos usar a função ‘when‘ do jQuery:

$( document ).ready(function() {
 
	$.when(preenche_form()).done(function(){exibe_botoes();});
 
         preenche_tema($('#acao_eixo'));
});

Porém, também não funcionou.

Resta então apresentar alguma teoria, estudar um pouco para compreender a solução:

jQuery e AJAX funcionam de forma assíncrona, ou seja, por óbvio, sem sincronia. É o que acontece no caso em comento, é chamada a função que preenche o formulário e, antes desta terminar, a aplicação já chama a segunda que habilita os botões, porém, esta segunda depende do resultado da primeira, assim, o negócio simplesmente não funciona, nenhum botão da aplicação é habilitado nunca, pois a segunda função não tem parâmetros para trabalhar.

Assim, é necessário alterar o comportamento padrão do jQuery, ou seja, torná-lo síncrono, com execução em sequência, aguardando o término da primeira função para só então executar a segunda.

E aqui mais um pouco de aprendizado:

O jQuery tem funções de categoria “Deferreds”, ou diferidas, adiadas. Mas o que isso significa na prática?

Quando uma função desse tipo é chamada, normalmente as de execução mais demorada, a função retorna uma “promise”, ou promessa, de que irá concluir em algum momento, porém, o programa não espera e, enquanto aguarda o “cumprimento da promessa” já vai chamando as funções seguintes. Tá aí a execução assíncrona.

Como exemplos de função “deferred” temos o $.ajax e $.animate.

As funções que criamos, como as do exemplo, em regra não são do tipo deferred, assim, usar when com estas funções, não vai dar resultado algum, vai continuar sendo executado “tudo junto”.

Aliás, a função when existe justamente para que possamos, conforme a necessidade de nossa aplicação, executar funções de forma encadeada, ou seja, assim que esta terminar, execute esta….

Com uma leve pincelada de compreensão de como funciona o trem, podemos concluir então que não tem jeito, certo?

Errado!

O jQuery oferece ferramentas para transformarmos qualquer função comum no tipo deferred.

Vamos a como fazer:

Na função preenche_form() incluímos as funções Deferred, promise e resolve:

function preenche_form()
{
     atrasa=new $.Deferred(); //avisa que é uma função do tipo diferido, mesmo que originalmente não fosse
 
     //seu código
 
     atrasa.resolve(); //avisa que a função terminou, coloque no ponto em que as ações terminam (pode ser usado mais de um...)
 
     //seu código
 
     return atrasa.promise(); //envia a promessa que vai terminar alguma hora
};

 

É isso, problema resolvido, em, breve um modelinho funcional.

Um pouco de história:

Outros meios de se fazer a mesma coisa é com callbacks, ou seja, encadear as funções de modo a executar uma por vez, comprometendo a performance. Outro método um pouco menos pior, era usar Timeouts nas funções, ou loops que eram executados enquanto a função não terminava. O when certamente é uma solução mais elegante.

 

 

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
 

Excelente equipamento, usamos alguns para transporte de dados cá pela Academia.

Porém, uma crítica:

Os pézinhos de borracha são colados com cuspe! (risos).

Depois de 4 anos de uso, este foi o único defeito, solucionado com um aplique de borracha adquirido por R$3,00 em papelaria daqui da região.

Veja pelas fotos:

 

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)

out 242014
 

 

 

Projeto de Lei 6625

/2013 pode trazer incentivos fiscais para empresas de informática.

Certamente um setor estratégico para o país, incentivar, afastando a estonteante carga tributária nacional, é medida louvável.

Porém, entendo que falte um pouco mais de tecnicidade à Lei, o legislador trata a “start-up” como outras microempresas, impondo algumas regras que não são deste mundo, cito duas que entendo prejudicar o espírito que se defende na Lei:

Serão beneficiadas empresas com faturamento trimestral de até 30 mil e tiver , no máximo, 4 funcionários.

Senhores Legisladores:

Os profissionais de informática, em especial aqueles que dedicar-se-ão a start-ups, tem uma renda mensal média de 12 mil Reais. Ou seja, uma empresa com faturamento trimestral de R$30 mil, não será capaz de contratar um bom funcionário sequer, quanto mais 4. Não confunda microempresas com empresas de informática, nestas últimas o maior capital não está nas instalações, não está nos estoques, está, sim, na cabeça de seus funcionários que, pelo grau de especialização exigido, são profissionais caros, quando comparados à média salarial nacional.

Por outro lado, a limitação de contratação a 4 funcionários é um contrasenso, pois deveríamos, como país, incentivar a contratação, não limitá-la!

Assim, excelente proposta, Lei com um espírito nobre, porém com uma execução pobre, pois não reflete a realidade do mercado informático e, no fim das contas – mantida como está, será só mais uma Lei sem propósito.

 

(imagem do cofrinho, licença livre, pode ser baixado em: http://fc01.deviantart.net/fs71/f/2014/295/d/a/pig_bank_by_altercom-d83sdl6.svg)

 

out 232014
 

O problema é o seguinte:

Temos uma tabela com dados de pedidos, preenchida dinamicamente com AJAX/PHP/MySQL.

Até aí ok, porém, para facilitar a visualização, pretendemos colorir a linha (cada linha representa um pedido) conforme o valor da célula que contém a informação de estatus do pedido.

Antes da função jQuery, temos:

tabela2

function colore_tabela()
    {
        /*
         * TEMOS 8 Status possíveis, com sua cores respectivas:
         *  1-salva;                    branca
         *  2-aguardando validação;     azul
         *  3-não validada;             amarelo
         *  4-aguardando aprovação;     azul
         *  5-aprovada;                 verde
         *  6-não aprovada;             amarelo
         *  7-cancelada;                vermelho
         *  8-concluida;                verde
 
      */
 
$('#t_dados').find('tr').each(function(indice){
switch($(this).children().eq(0).text())
{
 
case 'aguardando validação':
case 'aguardando aprovação':
$(this).prop('class','info');
break;
 
case 'não validada':
case 'não aprovada':
$(this).prop('class','warning');
break;
 
case 'aprovada':
case 'concluida':
$(this).prop('class','success');
break;
 
case 'cancelada':
$(this).prop('class','danger');
break;
 
};
});
}

Foram usadas as classes do Bootstrap 3.0 para tebelas: http://getbootstrap.com/css/#tables-contextual-classes

Após:

tabela1

Visualização melhorada, com poucos comandos e processamento client-side, certamente uma boa pedida.

 

Neste caso específico, criamos uma função isolada que é chamada depois da execução do AJAX, porém, caso sua tabela já venha preenchida, podes chamá-la logo ao carregar a página, com esta sugestão (ou mesmo através de função anônima):

$( document ).ready(function(){
		colore_tabela();
		});

 

Para entender um pouco mais:

Usamos a função .each() para percorrer cada linha da tabela, em seguida, selecionamos com children(), seguido de eq(0) o texto da primeira célula, logo, se quiser alterar qual célula será testada, basta alterar o índice, onde 0 representa a primeira coluna, 1 a segunda e assim por diante.

 

Até a próxima.