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
Posts relacionados
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.
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
Enviado por: Leandro Garcia - Categoria(s): Connect, facebook
Tags relacionadas:
25/11/2009 - 16:39
Para se conectar co Facebook, precisa-se seguir algunas passos básicos.
1º Quando você iniciar a tag HTML, você deveincluir nela uma sintaxe XML do Facebook. como o exemplo abaixo.
Antes
<html xmlns="http://www.w3.org/1999/xhtml">
Depois
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
2º Incluir ao final do documento, antes da tag </body> as linhas abaixo, onde 6f9a5e6aeeff75a6c5ef707dbc301e3f, é a Chave API que você cadastrou anteriormente.
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm");
</script>
3º Você deve enviar um arquivo html receiver para a mesma pasta do app no sevidor. O código deve ser exatamente o abaixo, sempre.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
Pronto, você conectou seu aplicativo. Simples, não?
Mas, vamos melhorar um pouco.
Vamos incluir o botão Fconnect, para conectar.
Isso é mais complicado.
Você precisa incluir a tag abaixo onde você quiser que o botão apareça.
<fb:login-button></fb:login-button>
Brincadeira, é bem simples.
Com isso você se conecta, mas não obtem nenhuma informação sequer.
Vamos melhorar mais um pouco.
Vamos colocar o botão do Fconnect e uma div com um id (user)
<div id="user">
Name: <input name="name" size="27"><br />
Ou você pode se conectar com <fb:login-button lenght="long" onlogin="update_user_box();"></fb:login-button>
</div>
É nessa div, que mais tarde as informações serão incluídas via Javascript.
vamos cirar a fução em Js para receber e arrumar as informações.
function update_user_box(){
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>"
+ "Bem-vindo, <fb:name uid=loggedinuser useyou=false></fb:name>. Voc&amp;amp;amp;ecirc; est&amp;amp;amp;aacute; conectado &amp;amp;amp;agrave; sua conta do facebook."
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
Com essa função você recebe a imagem (avatar) do usuário e o nome dele e joga tudo naquela div que criamos anterormente (lembra?).
<!-- essa é a imagem -->
<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>
<!-- essa é o nome -->
<fb:name uid=loggedinuser useyou=false></fb:name>
Pra finalizar, na última linha, onde incluimos A chave da API, nós fazemos uma pequena alteração.
FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm", {"ifUserConnected" : update_user_box});
Incluindo a sintaxe “{“ifUserConnected” : update_user_box}”, ao entrar na página, se o usuário estiver conectado ao facebook e ter permitido a página acessar seu perfil, não aparece o botão do connect, mas já as informações.
Em relação ao botão “Fconnect” não da pra alterar ao seu “bel prazer”, mas da pra usar alguns pré-confirgurados. Neste link você consegue visualizar as opções disponíveis.
É isso. Agora você já sabe como conectar ao facebook. No próximo post, vou ensira a postar alguma coisa no mural.
Para maiores informações sobre a API acesso o Wiki. http://wiki.developers.facebook.com/
Veja o vídeo explicativo
Enviado por: Leandro Garcia - Categoria(s): Connect, facebook
Tags relacionadas: facebookn connect
24/11/2009 - 18:24
O facebook connect é uma API do Facebook que permite que você desenvolva suas aplicações, tais como comentários de blogs, utilizando informações da conta do usuário do Facebook, ou , também, permite que você poste mensagens no mural do usuário do facebook.
Veja o exemplo abaixo da utilização do Facebook Connect. O site utilizado é o www.techcrunch.com
Neste ponto abaixo, o usuário permite a conexão do site/aplicação com a conta dele no facebook.
Neste ponto ele digita o usuário e senha dele no Facebook.
Após validação da conta no facebook, o fconnect traz alguma informações de volta.
Uma vez postado o comentário, o facebook connect traz um pop para a confirmação da inclusão da mensagem no mural do usuário dentro do facebook.
Depois de confirmada, a mensagem é postada no Mural do usuário dentro do Facebook,
Este foi um exemplo da utilização do Facebook Connect em um blog, no caso o http://www.techcrunch.com/
Legal, já vi em funcionamento, mas como eu faço isso?
Em princípio parece difícil mas na verdade é bem fácil. Vamos lá.
A primeira coisa que você precisa é de uma conta no facebook. Acesse www.facebook.com e crie sua conta.
Após a criação da conta, deve-se adicionar ao menos um amigo para validar a conta (parece mentira, mas apanhamos muito até descobrir isso)
Após criar a conta e ter uma amigo adiconado, podemos criar um app.
Primeiro passo, acesse www.facebook.com/developers.
Permita o acesso ao developers.
Clique em set up a new application (do lado direito superior).
Preencha o Nome do APP e concorde com os termos de responsabilidade.
A partir deste ponto você começa a preencher os dados do APP.
Aqui você escolhe as imagens do app. A imagem(icone) que será exibido em cada postagem no mural e a imagem do app. (não é necessário incluir para funcionar, mas a utilização deixa o App mais completo)
Vamos usar o 
Par o ícone (Meu Primeiro App)
Faça o mesmo processo para a imagem maior.
Não altere mais nada nesta tela.
Clique em Conectar.
Nesta tela preencha o campo “Conectar URL” com a URL de onde a página que utilizará o Fconnect vai acessar, exemplo, se o endereço da página for, por exemplo, “http://www.meuprimeiroappnofacebook.com/mpa.php?id=1″, no campo você deve preencher “http://www.meuprimeiroappnofacebook.com”, nada mais.
Clique em Salvar alterações.
Pronto, você configurou seu primeiro App.
A chave de API, será utilizada posteriormente na página.
Enviado por: Leandro Garcia - Categoria(s): Connect, facebook, midia social
Tags relacionadas: Connect, facebook, redes sociais
09/09/2009 - 18:09
Ultimamente tenho trabalhado bastante com redes sociais.
No momento tenho trabalhado bastante com a API do Facebook, a Fconnect.
Estou elaborando um tutorial a respeito do funcionamento da api, mas por enquanto vocês podem ler a wiki do facebook para o fconnect. http://wiki.developers.facebook.com/index.php/Facebook_Connect
Esteaqui é o primeiro trabalho que eu participei para desenvolvimento com a API FConnect.
http://app.esporte.ig.com.br/placar/forum/index.php?jogo=13004
Enviado por: Leandro Garcia - Categoria(s): midia social
Tags relacionadas:
09/09/2009 - 18:02
Nos últimos tempos, tem-se muito falado sobre midias socias, seus impactos, seu poder, suas possibilidades…
Nesses últimos tempos, principalmente depois da utilização de midias sociais, principalmente o Twitter, na campanha presidencial do então candidato (hoje presidente) Barack Obama para a Casa Branca.
Existem diversos modelos de mídias sociais difundidas atuamente pelo mundo. Modelos voltados para a comunicação, colaboração, multimídia e entretenimento.
O primeiro exemplo de mídia social amplamente difundido no mundo foi o blog, há relatos de pré-cursores de blogs do inicio dos anos 90. O termo blog é uma evolução do termo weblog, criado em 1997 por Jorn Barger e posteriormente abreviado para blog por Peter Merholz.
Um dos miores serviços de blog existentes no mundo, o blogger, criado em 1999 pela empresa Pyra Labs que em 2003 foi adquirida pelo Google.
Posteriormente foram surgindo diversos outros tipos de midias sociais, como as redes Sociais (Orkut, facebook, etc), O Flicker, a LastFm, o Blip, o twitter, etc.
Com o extremo sucesso das redes sociais, Orkut no Brasil, Myspace e Facebook no mundo, o mundo coorporativo passou a olhar com melhores olhos as midias sociais, a passo de terem sido criados, inclusive, fuções específicas dentro de organizações para se estudar e trabalhar em midias sociais. Pesquisadores passaram a utilizar redes sociais como canal de pesquisa, estudantes utilizam a mesma premissa de pesquisa (inclusive eu)*, etc. As possíbilidades são imensas.
Algumas agências de publicidade, além das tradicionais areas, criaram áreas específicas para se elaborar ações de marketing em redes sociais.
Há algum tempo, começou-se a onda dos aplicativos sociais. Aplicativos desenvolvidos a partir de uma API própria da rede social** a fim de se criar um complemento para o perfil do usuário da rede social. No Brasil, tendo, por enquanto, como principal rede social o Orkut***, podemos utilizar como exemplo o App BuddyPoke, aplicativo bem pouco utíl, mas de enorme sucesso entre os perfis do Orkut. Neste, o usuario pode criar um modelo de si próprio baseado nos traços que o app reserva, e, também, permite a interação com seus amigos dentro da rede que também possuem este app instalado em seu perfil.
A idéia da rede social é a interação entre os usuários, se pesquisarmos a respeito, veremos que os apps mais bem sucedidos em todas as redes sociais, são aqueles que oferecem o melhor tipo de interação entre os usuários.
O mais interessante, na minha opinião, sobre as midias sociais é que essas foram, ou estão sendo, a quebra de um paradigma, umas poucas pessoas detinham o poder da informação, e informação é poder, enquanto todas as demais eram obrigadas à receber aquela informação da maneira com que mais conviesse ao emissor (pesquisem sobre o debate entre collor e lula ou prestem atenção nas reportagens com o mesmo assunto nos diversos meios de comunicação), hoje, a internet/ redes sociais passaram a desempenhar um papel bem relevante da difusão da informação na otica de quem v~e a notícia e não de quem detem o poder da comunicação de massa.
Uma pessoa que frequenta as midias socias “corretas”****, pode ficar informado de determinado assunto bem antes de este ser anunciado em TV ou rádio. Veja caso da morte do cantor Michael Jackson.*****
* Na época em que eu estava elaborando meu TCC, sobre a Hering, eu acessei diversas comunidades dentro do Orkut para colher informações da maneira como a empresa era vista no mecado.
** A API mais utilizada é a do Facebook, pois o Facebook é a maior rede social do mundo, mas a mais difundida entre as redes sociais é a Open Social do Google, que está presente no Orkut, MySpace, Hi5, Sonico, Linkdin, etc.
*** Até o momento a principal rede social no Brasil e o Orkut, mas o Facebook vem crescendo bastante seu share de mercado.
**** Não existe midia social correta, existe a mais adequado para a mensagem que voc~e quer transmitir.
***** Na ocasião da morte do rei do Pop, a notícia foi dada em primeira mão pelo site TMZ, especializado em fofocas, em seguida notícia foi amplamente difundida por blogs, redes sociais e principalmente o Twitter.
Enviado por: Leandro Garcia - Categoria(s): Open Social, midia social
Tags relacionadas: facebook, hi5, linkedin, midias sociais, myspcaes, opensocial, orkut, social media