11/03/2010 - 01:49
É 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.
[/sourcecode]
$(function($){
$(“#date”).mask(“99/99/9999″);
});
[/sorcecode]
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.
Enviado por: Leandro Garcia - Categoria(s): Frameworks, jquery, plugin
Tags relacionadas:
11/03/2010 - 01:31
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
Posts relacionados
Enviado por: Leandro Garcia - Categoria(s): API, dicas
Tags relacionadas:
10/03/2010 - 16:05
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.
Enviado por: Leandro Garcia - Categoria(s): API, Connect, facebook
Tags relacionadas: facebook, facebookn connect
09/03/2010 - 16:07
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
Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas
Tags relacionadas: JavaScript, json
26/01/2010 - 15:27
Salve!
Em javascript há duas funções bem interessantes para se trabalhar com tempo a setTimeout e a setInterval.
Nos dois casos você diz ao navegador para executar determinado código dentro de determinado tempo, ou seja, você pode dizer ao browser para executar a função alert, por exemplo, daqui a 5 segundos.
Mas qual é a diferença??
A diferença é que a “setTimeout” é executada uma vez e a setInterval é executada de tantos em tantos segundos.
na Prática.
/*Acionado uma vez. Em 10 segundo à partir da chamada da função*/
setTimeout(alert("alerta"),10000);
/*Acionado sempre, a cada 10 segundos*/
setInterval(alert("alerta"),10000);
Para mim, é muito útil…
Enviado por: Leandro Garcia - Categoria(s): Descategorizado, JavaScript
Tags relacionadas: JavaScript, setinterval, settimeout, tempo
06/01/2010 - 18:02
Se tem uma função básica em quase todas as linguagens de programação e extremamente util é a “trim”.
Pra quem não sabe, a função trim serve para retirar os espaços antes e depois de uma string. Algom mais ou menos assim:
Antes:
” Olá Mundo ”
Depois do uso do trim
“Olá Mundo”
Mas, sempre tem um mas…. Em Javascript não tem, pelo menos não nativa. Você deve criar uma.
Há algum tempo atrás eu encontrei uma na internet que usa expressões regulares para retirar esses espaços. Não sei quem a criou, mas se souberem me avisem para que eu possa colocar os créditos por ela.
Vamos à função. Bem simples.
function Trim(str){return str.replace(/^\s+|\s+$/g,"");}
Depois é só usar.
//Exemplo
var string = " Tem espaço antes e Depois ";
alert(Trim(string));
Testem. Usem. Usufruam.
Posts relacionados
Enviado por: Leandro Garcia - Categoria(s): JavaScript
Tags relacionadas: função, Java Script, JavaScript
22/12/2009 - 21:40
jQuery é, muito provavelmente, o framework para Javascript mais utilizado no mundo.
Anteriormente eu comentei o que era um framework. Neste vou comentar sobre o jQuery.
O jQuery é uma mão na roda em se tratando de desenvolver qualquer solução para ambiente Web que necessite de interações do lado do cliente.
Uma das maiores vantagens do jQuery é a limpeza/simplicidade do código, pois com muito poucos comandos conseguimos elaborar interações melhor desenovolvidas.
Com o jquery é muito mais fácil trabalhar com eventos como o “click” do que da maneira “tradicional”, pois para se trabalhar com eventos se era necessário implementar diversos comando que acabavam por tornar o código mais pesado e muitas vezes até defícil de se entender e dar manutenção, já com o jQuery, a simples implementação da função “.click” no seu código carregado junto com a página é o suficiente.
O desnvolvimento como jQuery torna o código mais simples e intuitivo.
O Ato de selecionar determinado elemento de uma página é muito mais fácil. O que antes era necessário nettar o id para o elemento e depois utilizar o “document.getElementById(‘id’)”, com o jQuery basta usar o “$(‘#id’)” e funciona da mesma maneira. No javascript não existe um “document.getElementByClass”, o que seria de enorme utilidade para qualquer desenvolvedor, mas no jQuery há. E de maneira muito simples, “$(‘.class’)”, com isso você consegue selecionar todos elementos que tenham a classe “.class” e à partir disso, fazer o que for necessário.
Abaixo vou escrever um código que muda a cor de todos os elementos que tenham a classe “cor”. A Cor inicial será preta.
.cor{color:#000} //Preto
<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
$(document).ready(function(){
$(".cor").css("color","#ff0000");
});
Explicação:
$(document).ready(function(){ -> Ao final do carregamento da página
$(“.cor”).css(“color”,”#ff0000″); -> Selecionar todos os elementos com a clarr cor, no caso o primeiro, terceiro, quarto e sexto itens da lista e alterar a cor para vermelho.
Esse código pode ser alterado da maneira que mais lhe convier, por exemplo, você quer ter certeza de que apenas os itens de uma lista com a classe cor seja alterados e não os demais, basta incluir o elemento.
<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
<p>Paragrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("li.cor").css("color","#ff0000");
});
</script>
Agora se você quer garantir que apenas os itens de uma lista não ordenada mudem de cor:
<ol>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ol>
<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
<p>Paragrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("ul li.cor").css("color","#ff0000");
});
</script>
E assim por diante.
Vou escrever uma série de tutoriais para se dar os primeiros passos com jQuery, mas enquanto isso, você pode acessar o site do jQuery e baixar o framework e fazer o doqnload dos exemplos acima.
Abraços.
Veja
Exemplo 1
Exemplo 2
Exemplo 3
Download
Enviado por: Leandro Garcia - Categoria(s): Frameworks, jquery
Tags relacionadas: dicas, jquery
21/12/2009 - 20:48
Durante muito tempo resisti ao uso de frameworks, tanto para Javascript quanto para PHP, mas hoje percebo o quanto perdi tempo com essa idéia inútil.
Essa minha mudança se deu após iniciar o uso do jQuery, framework em Javascript. A rapidez com que eu consigo desenvolver aplicações, funções, etc. Chega a ser impressionante em relação ao tempo que eu usava anteriormente, isso sem contar a limpeza do código, o menor número de código para fazer as coisas e as probabilidades que eu, agora, tenho em mãos.
Uma coisa deve-se ficar claro, framework não é uma linguagem de programação, não é uma metodologia de desenvolvimento, é, um conjunto de funcionalidades implementadas em determinada linguagem para serem utilizadas para auxiliar o desenvolvimento de aplicações. Trazendo maior velocidade, acerto no desenvolvimento do código.
Os frameworks, pelo menos a maioria deles, são desenvolvidos tendo a idéia de orientação a objetos.
O mais legal de um framework é que eles não são “engessados”, mas podem ser adaptados para cada projeto que você utilizem.
Os Frameworks não são linguagens de programação!
Existem Frameworks para, praticamente, todas as linguagens de programação e, em boa parte delas, váriosframeworks diferentes.
Posts relacionados
Enviado por: Leandro Garcia - Categoria(s): Frameworks
Tags relacionadas: Frameworks
03/12/2009 - 14:46
É apenas uma dica, que par muitos já deve ser velha, mas tenho certeza de que para muitos é uma novidade.
Estou planejando escrever este post com esta dica faz tempo, mas não havia me decidido pela forma com que eu escreveria. Acabei me decidino por uma maneira simples e direta.
Durante muito tempo, sempre que eu precisava armazenar uma data na base de dados o fazia pela maneira em que nós, brasileiros, escrevemos, ou seja, 22/11/1984 (meu aniversário aliás, se quiser me dar um presente fiquem à vontade. rs), mas percebi que quando precisava comparar datas era um Deus nos acuda.
Lendo na Internet descobri que o mais interessante seria usar o formato Ano-mês-dia, ou seja meu aniversário ficaria 1984-11-22, uma maneira mais fácil de comparar datas e ordenar seus SELECTS.
Para escreve a data de hoje, ao invés de usar:
date('d/m/Y');
use
date('Y-m-d');
Você vai se surpreender como isso vai te ajudar.
Ah, aproveitando, se você precisar armazenar a data de atualização, use o formato datetime.
date('Y-m-d H:i:s');//1984-11-22 22:05:15
Vai aqui uma funçãozinha que eu fiz pra exibir a data no formato brasileiro à partir do formato acima.
function FormataData($date){
$dt = explode('"-",$date');
return "{$dt[3]}/$dt[2]}/$dt[1]}";
}
Fica a dica.
Posts relacionados
Enviado por: Leandro Garcia - Categoria(s): PHP, dicas
Tags relacionadas: data, date, dica, PHP
26/11/2009 - 14:40
Acreditando eu que os dois posts anteriores foram seguidos, agora vamos postar o item no mural.
Para postar, a primeira coisa que precisamos é criar um “template feed data”. Vá até http://developers.facebook.com/tools.php?feed.
Procure o nome do seu aplicativo e clique em Proxima.
Neste ponto você começa a desenvolver ou criar o seu “template feed data”.
O template nada mais é do que umaforma com que o facebook recebe informações em JSON e exibe no perfil do usuário com sua prévia autorização.
O primeiro é o de uma linha, algumas variáveis são exclusivvas como actor e images. As variáveis são exibidas na forma de {*variável*}. Ex. {*actor*} escreveu um post. Sairia: Leandro escreveu um post.
Há o campo onde você desenvolve o template e abaixo, um onde você desenvolve o JSON, por padrão vem:
{“images”:[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}]}
Apenas imagens, mas você pode e deve acrescentar de acordo com sua necessidade.
Vamos criar um que envie o resultado de um jogo, o nome dos times, o escudo de cada time e o texto que você escreveu.
{“time1″:”Atlético-GO”,”time2″:”palmeiras”,”gols1″:”2″,”gols2″:”0″, {“images”:[{"src":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif", "href":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif"}, {"src": "http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif", "href":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif"}]},”comentario”:”vai corinthians”}
Com este JSON, ocê pode desenvolver seu template.
{*actor*} Comentou sobre {*time1*} {*gols1*} x {*gols2*} {*time1*} -> Leandro Garcia comentou sobre Corinthians 2 x 0 palmeiras
Ao clicar em próxima, você desenvolve o template maior, o que é mais comulmente usado.
Colocaremos o título da mesma maneira, embora não necessite ser igual.
{*actor*} Comentou sobre {*time1*} {*gols1*} x {*gols2*} {*time1*} -> Leandro Garcia comentou sobre Corinthians 2 x 0 palmeiras
Abaix no Histórico curto, colocaremos apenas o comentário digitado:
{*comentario*} -> Vai Corinthians
depois Próxima.
No próximo item você cria um link de retorno, no Texto do link da ação, por exemplo: Veja mais sobre o Jogo
no Link da ação ex. http://esporte.ig.com.br
Pronto, em todo post do mural vai haver um link para http://esporte.ig.com.br, você pode alterar da maneira como preferir, inclusive utilizar o JSON, como o número do jogo por exemplo. Vai da sua necessidade.
Clique em próxima e depois em registar coleção de modelo.
Será aberto um pop com o identificador do template. Copie-o e reserve pra mais tarde.
Bom agora você tem um template elaborado, hora de criar o código propriamente dito.
Criamos uma função em JS para publicar.
** O facebook alterou a forma de se publicar. Neste poste você consegue ver.
function publish($comentario){
{"time1":"Corinthians","time2":"palmeiras","gols1":"2","gols2":"0", "images":[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}],"comentario":"vai corinthians"}
facebook_publish_feed_story(141837730762, $template_data);
}
Onde 141837730762 é o id do template que você criou;
O código abaixo, faz a permissão;
function facebook_prompt_permission(permission) {
FB.ensureInit(function() {
FB.Connect.showPermissionDialog(permission);
});
}
O código abaixo faz a publicação própriamenst dita.
function facebook_publish_feed_story(form_bundle_id, template_data) {
FB.ensureInit(function() {
FB.Connect.showFeedDialog(form_bundle_id, template_data);
});
}
Criamod um botão para enviar a mensagem.
<input onclick="publish('Vai Corinthians')" type="button" value="Submit Comment" />
ao clicar vai abrir um pop com a mensagem.
Clicando e Publish, estará publicado no Mural d Usuário no Facebook.
Vídeo de como publicar um Feed com Facebook Connect.
Mo próximo Post como crar uma página de comentários
** Atualização dia 10/03/2010
Enviado por: Leandro Garcia - Categoria(s): API, Connect, facebook
Tags relacionadas: