Leandro Garcia

Mascara de campo em JS com jQuery.

É muito comum em aplicações sejam web ou não que alguns campos como telefone, por exemplo, tenham que ter um formato padrão. [(99) 9999-9999]. O difícil é conseguir com que o usuário que acessa essa aplicação digite da maneira correa e não [(999)  99999999], por exemplo.

Recentemente ao desenvolvermos um widget, aqui no iG, no deparamos com a mesma situação, no caso era valor. Em uma busca na net encontramos um plugin para jQuery que faz isso de maneira bem fácil.

Na página do plugin é possível baixar o arquivo que deve ser incluído no código logo abaixo do arquivo de inclusão do jquery.

Algo mais ou menos assim:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Depois vem a mágica.

$(function($){
    $("#date").mask("99/99/9999");
});

Permite apenas números e o formato será 99/99/9999.  Simple viu?

Aí você pode uisar com data, hora, valor, etc…

O “9″ representa número, se usar “a” representará letra, se usar “*” representara caracter.

Simples, fácil e objetivo.

Para usar valore, no entanto, pode não ser o ideal uma vez que se digita da esquerda pra direita o que obriga a digitar todos os valores.

• 1 comentário
• Comentar
• Permalink
• Compartilhe

Google Charts

Eu ja me peguei algumas necessitando incluir gráficos em algumas aplicações que desenvolvi. Cheguei até a desenvolver uma função que gerava gráficos em barra, mas não era muito funcional e, além de de só poder utilizar gráficos em barra não era muito bacana.

Eis que descobri uma ferrmente bem bacana chamada Google Charts.

Mas qual a vantagem?

Basta que você insira uma tag img em seu código e no src dela você coloque um determinado endereço com alguns parâmetros.

Por exemplo.

Olha a url.

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Viu como é simples. No site tem a documentação de como se elaborar outros tipos de gráficos.

Outros exemplos.
Acelera

Linha

Pizza

Mapa

Matematica

Radar

Entre Outros

• 1 comentário
• Comentar
• Permalink
• Compartilhe

Postando no Facebook com FCONNECT. Atualização;

Tempos atrás o Facebook alterou a forma de postar mensagens através da API.

Em posts anteriores eu havia escrito que “precisamos é criar um ‘template feed data’” e bla bla bla. Esqueçam. O Facebook mudou isso. Ficou mais fácil.

A função agora é a “FB.Connect.streamPublish”.

Quando precisei alterar a aplicação que eu desenvolvi, eu apenas alterei a função que chamava esta função da API. No post que eu havia feito, a função era a “facebook_publish_feed_story".

Para usar a função streamPublish, basta passar via JSON (ver post aterior) as informações que você quer exibir, respeitando, é claro, as especificações da API.

exmplo de JSON

var attachment = {‘name’:'Atualizando’, ‘description’:'Estou descrevendo a minha mensagem que pod ser um pedaço de um post…’, ‘href’:'http://www.leandrogarcia.com/blog/};

Este JSON acima adiciona o conteúdo da mensagem.
Neste abaixo, Eu adicono o texto que fica na parte de baixo da mensagem publicada.

var actionLinks = [{ "text": "Acompanhe também:", "href": "http://www.leandrogarcia.com/blog"}];

Neste a mensagem que aparece na caixa.

var message = “Esta mensagem vai aparecer na caixa de dialogo”;

E em seguida eu chamo a função;

FB.Connect.streamPublish(message, attachment,actionLinks);

A função completa fica:

function facebook_publish_feed_story() {
	var message = "Esta mensagem vai aparecer na caixa de dialogo";
	var attachment = {'name':'Atualizando','description':'Estou descrevendo a minha mensagem que pod ser um pedaço de um post...','href':'http://www.leandrogarcia.com/blog/};
	var actionLinks = [{ "text": "Acompanhe também:", "href": "http://www.leandrogarcia.com/blog"}];
	FB.Connect.streamPublish(message, attachment,actionLinks)
}

A variável message, você pode recebela na função. Vai da sua necessidade.

O Tyler, havia me perguntado sobre isso. O por que não estava funionando. Espero que esteja esclarecido.

• 4 comentários
• Comentar
• Permalink
• Compartilhe

JSON (JavaScript Object Notation)

Muitas vezes nos deparamos com a necessidade de intercambiar dados entre páginas, servidores ou até mesmo domiínios. A maioria de nós, inclusive eu a não muito tempo atrás, acredita que a única maneira de fazer esse intercambio é através de XML. Mas não é bem assim. Existe o JSON.

O JSON é um formato leve para intercambio de dados.

Mas qual a vantagem em relação ao XML?

Eu vejo três.

1ª – É bem mais leve de ser carregado do que um arquivo XML.

2ª – É mais fácil de se trabalhar

3ª – É Cross Browser*

*Quando usamos XML nos deparamos com um problemão para parsear as informações, as regras de segurança dos browsers. No Firefox, por exemplo, não é possível parsear as informações provenientes de um XML que esteja em um servidor diferente da aplicação, ou seja, se sua aplicação estiver hospedada em www.aqui.com.br, o Firefox só permitirá que você parseie um XML se ele estiver em, por exempo, www.aqui.com.com/esse.xml, agora se estiver, por exemplo em www.outro.com.br/esse.xml, as regras de segurança bloquearão sua aplicação. (Não necessáriamente isso acontece nas linguagens Backend)

Um vez explicado as vantagens do JSON, vamos ao formato.

{"notas" : [
   {"nome":"João", "nota1":8, "nota2":6, "nota3":10 },
   {"nome":"Maria", "nota1":5, "nota2":9, "nota3":8 },
   {"nome":"Pedro", "nota1":2, "nota2":7, "nota3":5 }
]};

No exemplo acima, temos um conjunto de dados chamado “notas” que tem as informações de três alunos, commo nome e notas.

Você pode ir hieranquizando as informaçõe da forma que melhor lhes convier.

Você encontra o JSON na maioria das APIs abertas da Internet, como as do Google, Facebook, Flickr, Twitter, etc.

Mas tudo isso não quer dizer que o XML seja inútil ou não deva ser usado. Cada caso e um caso. Existem casos web a for que se utilizam dos dois formato, outros disponibilizam os dois formatos (Twitter por exemplo)…

Mais informações em http://www.json.org/json-pt.html

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe