Finalmente, criei vergonha na cara e desenvolvi um app do blog para o facebook. Agora você pode adicioná-lo ao seu perfil e acompanhar os últimos posts deste que vos escreve.
Segue o link. http://www.facebook.com/apps/application.php?id=135598243117295
Espero que aproveitem, abraços e até a próxima.
ção É muito comum que em projetos que desenvolvemos tenham formulários e em formularios é praticamente necessário que haja validações qunaton à entrada de dados. Por mais que tenhamos quer validar a entrada dos dados por backend, uma boa prática é validar no front, através de JS.
A validação por JS é interessante uma vez que poupamos processamento do servidor por requisições inuteis como uma postagem de dados faltando algum campo requerido, além de ser mais rápido para o usuário. Muito trabalho com validação de dados nos diversos trabalhos em que participei. No entanto, depois que passei a utilizar jQuery o trabalho com validação foi muito facilitado. Uso de vez enquando um plugin chamado jquery validator, mas é muito raro, uma vez que o tamanho dele em KBs pode tornar a página mais lenta de ser carregada, e o que, geralmente, preciso validar é entrada de dados em brando ou formato de emails. Para isso, eu desenvolvi uma função para validar entrada de dados em branco e formato de e-mail, de frma bem simples e com poucas linhas de código. Essa função só funciona com jQuery.
function validaForm(){
var emailfilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
$(".erro").remove();
$(".emailerr").remove();
var required = $(".required");
var req = 0;
for(i=0;i<required.length;i++){
if($(required[i]).val() == ""){
if($(".erro").length == 0){
$("form").prepend('<p class="erro">campos obrigatorios</p>');
}
$(required[i]).css("border-color","#ff0000");
req = 1;
}
}
var email = $(".email");
for(i=0;i<email.length;i++){
if(!emailfilter.test($(email[i]).val())){
if($(".emailerr").length == 0){
$("form").prepend('<p class="emailerr">Email errado</p>');
}
$(email[i]).css("border-color","#ff0000");
req = 1;
}
}
if(req == 1){
return false;
}
}
Para que esta função funcione, você precisa incluir na tag form o atributo ‘onsubmit=”return validaForm()”‘ e a classe ‘required’ em cada campo que não pode ser em branco, para e-mail a classe ‘email’ como no exemplo a seguir.
<form action="#" method="post" onsubmit="return validaForm()"> <fieldset> <label>Nome</label><br /> <input type="text" name="nome" class="required" /> <br /> <label>Nome</label><br /> <input type="text" name="nome" class="email" /> <br /> <input type="submit" value="OK" /> </fieldset> </form>
Espero que seja tão util à vocês quanto écpara mim. Ckique nos links à baixo e veja em funcionamento.
http://tutoriais.leandrogarcia.com/jquery_validacao_formulario/
Recebi esse video muito bom sobre um produto que usa realidade aumentada em um e-commerce. Muito bom.
Estou desenvolvendo um framework CSS para agilizar a maioria dos desenvolvimentos front-end. Ainda não está completo, mas da pra se usar. Ja coloquei o código no Google Code, quem quiser ja pode baixar. No pacote tem um html exemplo com tudo que tem no framework.
Em breve mais novidades.
http://code.google.com/p/pakus/
Eventualmente nos deparamos com alguma aplicação web, ou até mesmo site, que tenha seu conetúdo armazenado em uma base de dados, seja ela um banco de dados ou um xml ou até mesmo JSON. isso é muito interessante no ponto de vista de dinamismo, pois você pode ter um sistema de administração, atualizar de maneira mais rápida, porém isso pode acarretar um grande problema se sua aplicação(site) tiver muito acesso. Isso pode criar um gargalo enorme na transferência dos dados e até mais travar seu servidor, uma vez que cada requisição de página é uma reuisição para o arquivo ou uma requisição para o banco de dados.
Para se evitar esse tipo de gargalo, é interessante utilizar algum mecanismo de cache para os dados. Um dos mais utilizados e mais fáceis de se usar (pelo menos em PHP) é o memcached.
O ruim desse mecanismo é que o servidor tem que disponibilizá-lo, não é uma coisa que você memo possa fazer em sua aplicação. Tirando isso, é muito bom.
Basicamente, você armazena os dados na memória do servidor o que porna a leitura muito mais rápida.
O memcached, permite que você armazene qualquer tipo de texto desde que em um array, ex. você não pode armazenar somente uma string, tem que armazenar um array que tenha essa string.
adicionar = “string”; X errado
adicionar = $array[0] = “string”; Correto
No memcached você armazena em um local (chave) que você define, o conteúdo e por quanto tempo você quer que o conteúdo seja armazenado.
Como um banco de dados, você deve informar ao memcached o endereço de armazenamento, por padrão é localhost:11211, mas pode variar caso o rsponsável pelo servidor determine.
bom vamos a um exemplo
$mem = new Memcache;
$mem->addServer("localhost:11211");
$mem->set("chave01", $array, TRUE, 60);
No exemplo acima, eu estou armazenando na chave01 meu array por 60 segundos.
Agora para pegar esse conteúdo, você deve usar a função get. Vamos ao exemplo.
$mem = new Memcache;
$mem->addServer("localhost:11211");
$resp = $mem->get("chave01");
print_r($resp);
Nesse exemplo eu estou pegando o conteúdo da chave01 e armazenando na variável $resp.
Aqui abaixo, um exemplo de uma função que procura no memcached uma determinada query e se não acha busca no banco de dados, armazena no memcached e responde o conteúdo.
function mysql_queryCache($consulta, $tempo = 3600) {
$chave = md5($consulta); //Gera uma chave à partir de um hash formado pela query
// Conecta no Memcached
$mem = new Memcache;
$mem->addServer("localhost:11211")
// Tenta pegar o item em cache
$query = $mem->get($chave);
if ($query === false) {
$query = mysql_query($consulta);
if(mysql_num_rows($query) > 0){
$itens_array = array();
if(mysql_num_rows($query)){
while($item = mysql_fetch_array($query)){
$itens_array[] = $item;
}
}
}else{
$itens_array[0] = "null";
$itens_array[1] = "null";
}
$mem->set($chave, $itens_array, TRUE, $tempo);
} else {
$itens_array = $query;
}
return $itens_array;
}
print_r(mysql_queryCache("SELECT * FROM clientes", 60) );
essa função procura no memcached a query ‘SELECT * FROM clientes’, se não tiver faz a busca no banco de dados, armazena no memcached e retorna o conteúdo. Se a query retornar vazia, responde null.
Basicamente é isso, espero que seja tão útil para voc~es como foi para mim.
Algumas vezes, precisamos incluir em nossos layouts um box com os últimos tweeets de um determinada conta
A API do twitter não permite que haja mais de 150 acessos à ela no período de uma hora, essa restrição é imposta através do ip que acessa. Por isso, não podemos fazer a requisião através de uma linguagem backend, como o PHP, pois com uma dessas linguagens a requisição é feita através do servidor, logo um único IP. Para driblar essa regra, uma possibilidade é acessar essa API através de Javascript, pois a requisição passa a ser feita através do IP do usuário.
Não é tão simples criar uma função em JS para efetuar essa tarefa, para isso, pesquisando na internet, achei o plugin de jQuery para efetuar essa tarefa. Ele é bem simples de usar. No pacote disponível para download, há um exemplo de uso.
http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter
Tive um problema recentemente, a API do twitter que na busca me traz as informações que preciso, em um determinado usuário resolveu não trazer, consequentemente o sistema não funcionou para este usuário.
A solução verificar o resultado se está vazio, no entando como o callback traz um jason é um pouco difícil. Pesquisando na Net descobri a função abaixo. Ela verifica se o objeto está vazio, se sim retorna true se não false. Bem útil.
function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}
return true;
}
Recentemente o Google lançou uma nova API chamada Google Fonts, junto lançou um diretorio de fontes de alta qualidade que podem ser usadas em qualquer aplicação WEB independente do navegador usado.
É bem simples de se usar, mas ainda não tem muita variedade de fonts disponíveis.
Google font directory
É o repositório de fontes liberadas para o uso através da API, pode ser acessada no endereço http://code.google.com/webfonts
Como usar
É muito simples usar essa API.
No google font directory, você clica em cima da fonte que vc quer usar e depois em GET the Code. Copie o código de referencia do CSS e cola na sua página. Depois é só usar.
Exemplo
Referência
link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'
CSS
h1.Cantarell { font-family: 'Cantarell', arial, serif; }
HTML
<h1 class="Cantarell">Cantarell</h1>
É 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.
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