jun 14

Runtastic

Pessoal, venho neste post apresentar uma ferramenta para quem gosta de se exercitar e também tem um smartphone com android, um blackberry ou iphone!

É o Runtastic, que é um app para dispositivos móveis, além de possuir o site em estilo de rede social, que permite que você rastreie seus exercícios, seja corridas a céu aberto, caminhadas, etc. Ele utiliza o GPS para calcular distância percorrida, velocidade, é integrado ao google maps, calcula as calorias gastas, mostra o histórico das suas atividades, pode ser integrado ao monitor cardíaco da polar que possui bluetooth, dentre outras funcionalidades.

Se você já utiliza algum desses softwares de treino, deve estar se perguntando: ” Por que devo parar de usar o que já uso e usar esse tal de runtastic, se pelo que você disse ele faz as mesmas coisas?”.

Pra mim o grande diferencial do runtastic é a possibilidade de adicionar treinos manualmente. O que isso proporciona? Para você que corre na esteira da academia, faz spinning, ou qualquer outra atividade que o GPS não adiante,  ele é perfeito, pois permite que você adicione seus treinos indoor!

Além disso no site, você consegue visualizar estatísticas sobre suas atividades, como calorias por sessão , distância percorrida por semana, dentre outros. Você também pode convidar seus amigos a participar e assim  pode comparar suas estatísticas com a de seus amigos, é bem interessante, dá um bom ânimo para fazer atividades físicas regularmente( algo essencial para quem trabalha o dia inteiro sentado numa cadeira em frente a um computador que nem eu).

É isso, um overview sobre o runtastic se quiserem mais info entrem no site deles. Ele possui uma versão gratuita e uma paga, esta última com algumas funcionalidades extras! Fica então a dica!

jun 06

Substituindo window.confirm() por jquery dialog

Para quem não conhece, jQuery é uma biblioteca javascript que simplifica e muito a programação em tal linguagem, com componentes visuais já prontos e fáceis de usar, além de interação ajax fácil e raidamente implementáveis. Tanto é bom que no framework primefaces, que pra mim é o melhor framework para jsf2 no momento, o utiliza.

Apresentações a parte, vou falar nesse post sobre como substituir as janelinhas de confirm nativas do javascript por outras mais agradáveis visualmente utilizando o jQuery junto com a jQuery UI.

Primeiramente você deve baixar os arquivos .js necessários e também ao baixar o jQuery UI escolher o tema de sua preferência para baixar o css necessário. Nesses links abaixo você poderá baixar aa útimaa versões  do jQuery e jQuery UI, podendo baixar a versão completa com comentários e identada, ideal para desenvolvimento e a minificada, ideal para ambientes de produção.

Após feitos os downloads você deverá adicionar ao seu projeto esses 3 arquivos no mínimo para funcionar (As versões aqui apresentadas são as últimas minificadas até esse post):

  • jquery-1.6.1.min.js
  • jquery-ui-1.8.13.custom.min.js
  • jquery-ui-1.8.13.custom.css

Com os arquivos baixados será necessário importá-los em suas página:

<link rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" type="text/css" media="all" />
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>

Agora vamos ao que indica o título do post,  para que não sabe  confirm() é uma função javascript que exibe uma tela de confirmação, nossa! Como é óbvio,  com as opções de OK e Cancelar, retornando true ou false segundo o que foi selecionado. É bem simples, bastando usar dentro de um bloco de script o seguinte código:

var resposta = confirma("Tem certeza que deseja fazer isso?");


Porém essas janelinha mostrada pelo navegador não possui um layout muito bonito digamos assim, que coisa afeminada, mas cliente é cliente, e normalmente como diz o ditado peixe morre pela boca, levando para o lado da computação:  usuário  gosta mais do visual do sistema do que de suas funcionalidades.
Com isso utilizando jQuery, você consegue agregar um valor muito grande ao seu produto final, pois as interfaces são muito ricas e, o melhor de tudo, muito simples de se utilizar (para nós programadores).  Para substituir o confirm você pode utilizar o componente dialog do jQuery UI, mais precisamente um do tipo modal confirmation, não deixa de ser um dialog, mas com os devidos parâmetros setados ele fica com a cara de um confirm.Abaixo segue o código para tal:

function confirmJquery(message, titulo, f) {

	$("#dialog-confirm").dialog( {
		modal : true,
		resizable : false,
		width : 450,
		title : titulo,
		buttons : {
			"Sim" : function() {

				
				f(true);
				$(this).dialog("close");

			},
			"Nu00E3o" : function() {

				
				f(false);
				$(this).dialog("close");
			}

		}
	});
	$("#dialog-confirm").html("<p><span class='ui-icon ui-icon-help' style='float:left; margin:0 7px 50px 0;'></span>"+ message+"</p>");

}

Explicando o código, essa função deve ser chamada passando como parâmetro a mensagem a ser exibida, o título da caixa de diálogo e uma função javascript que receba como parametro uma variável booleana. E agora você se pergunta, mas por que isso? Seguinte, como o confirm() pára o processamento, o código que vem após ele não é executado enquanto o usuário não selecionar uma opção. Porém ao se utilizar o dialog do jQuery, ele vai criar o modal panel e continuar executando, portanto caso você tenha algo que dependa da resposta dada pelo usuário, quando o usuário clicar na resposta já terá passado pelo código, daí a necessidade de se continuar a lógica em outra função.

Por fim é necessário adicionar uma div no corpo da página com o id, no caso do meu exemplo , dialog-confirm:

<div id="dialog-confirm" >
</div>

e pronto, agora é só chamar a função confirmJquery(“mensagem”,”Titulo”,f), e você terá o funcionamento do dialog como um confirm.