Salve pessoal. Acabei de criar um formspring pro blog, caso queiram fazer algum tipo de pergunta sobre algum assunto que eu não tenha comentado ou sobre qualquer assunto, você podem usar a caixa do formspring que eu coloquei aqui do lado, logo abaixo das redes sociais ou acessar meu perfil lá. http://www.formspring.me/blogdogarcia
Enviado por: leandro garcia - Categoria(s): Descategorizado Tags relacionadas:Sempre estou atrás de sites interessantes e bem feitos para estudá-los. Esta semana me deparei com um site francês (não que eu entenda francês) chamado Treme. Gostei muito do que vi.
A primeira vista, parece com aqueles tradicionais sites em flash, mas não é, é código.
Fica a dica.
http://www.orangecinemaseries.fr/evenement/treme/
Para quem desenvolve para internet, poucas coisas são tão uteis quanto alguns complementos para o Firefox. Entre eles o que mais se destaca, na minha opinião, é o FireBug.
Com o fire bug você consegue ver como ficaria determinado elemento na página se no css tivesse tal elemento ou se tivesso um pixel a mais, etc. Também é possível, Verificar o comportamento da rede nas requisições, o que acontece quando determinado evento em Ajax é acionado, assim como as variáveis e a resposta deste AJAX. É possível aumenta a quantidade de caracteres em determinado texto para verificar o comportamento do elemento, tudo em tempo real e de maneira que ao atualizar a página tudo volta ao normal.
A baixo tentarei descrever um pequeno tutorial sobre o “amigo” FireBug.
O primeiro passo, é instalá-lo no seu firefox.
Uma vez instalado, você deverá reiniciar seu Firefox e em seguida o complemento estará pronto para o uso.
Vamos lá.
Se vocês repararem, na barra de status deve estar aparecendo uma baratinha como esta. 
Isso quer dizer que seu complemento está apto para o uso. Há duas maneiras de s acionar o complemto, uma é clicando em cima da baratinha e outra é apertando F12 (uso mais)
Uma vez que vocês estão no meu blog (www.leandrogarcia.com/blog), você apretem a tecla f12 que abriá um console do firebug.
Você deve ter percebido que há algumas abas.
Console, HTML, CSS, SCRIPT DOM e Rede. No meu Caso Também o YSLOW, que é um complemento do complemento digamos assim.
Vou explicar cada aba individualmente.
Console.
A primeira coisa a fazer é habilitar a aba. Clique na seta e depois Habilitado.
Agora já podemos usar a aba.
No meu blog como não tem ajax rolando, não é possível vê-lo em ação. Vamos acessar um outro site ver o que acontece, digamos o placar do iG http://app.esporte.ig.com.br/temporeal/home.php?campeonato=1
Se você esperar alguns segundos, verá que surgirão algumas linhas nesta área.
Cada linha dessas é uma requisição que a página faz via ajax. Se voc~e clicar al qualquer uma dessas linhas verá que será aberto uma nova página que é a requisição.
Clique no icone + de qualquer uma das linhas e se abrirá alguns dados.
Quando se abre os dados, há mais quatro novas abas. Parâmetro (isso cajo haja algum parâmetro), Cabeçalhos, Resposta e HTML.
Parâmetro, exibe todos os parâmetro que você envia na requisição. nela você poderá verificar ´se a aplicaçãoe stá enviando algum parâmetro errado na requisição.
Cabeçalhos
Toda requisição gera um cabeçalho, com o Firebug você consegue vê-lo.
Resposta, é o que o servidor devolve na requisição, pode ser XML, html, variável, JSON, etc.
HTML, no caso o que o browser recebe já interpretado.
No caso de uma requisição via Método POST, você verá uma aba POSTAR, que traz os dados da postagem como parâmetros.
HTML
Nessa aba é onde você consegue alterar o layout da página para fazer testes. Consegue editar determinado elemento e ver o comportamento do mesmo, alterar textos e verificar como ficam, etc.
As possíbilidades são imensas, uma vez que aprenderem a usar, duvido que deixarão de usá-lo.
Enviado por: leandro garcia - Categoria(s): Complementos do Firefox Tags relacionadas: add-on, addon, complemento, firebugEste post é mias voltado para as pessoas que estão começando com desenvolvimento de sites, principalmente o front-end.
Livros, revistas, blog, artigos, etc, são de extrema valia para aprender sobre determinada linguagem de programação e se interar nas novidades desse mundo veloz e insano que é a tecnologia, no entanto não devem ser suas únicas fontes de informação e aprendizado.
O ato de se estudar algum assunto não compreende somente ler alguma coisa que alguém escreveu, compreende também, por a mão na massa, dissecar alguma cisa que alguém tenha feito, aprender, tentar e errar. Nessa toada, penso que uma das melhores escolas para um desenvolvedor é aprender com seus erros e com os erros e acertos de outros.
Acessem sites dos mais diversos assuntos, sejam eles bem feitos ou não, vejam o código fonte deles, seu CSS, seu Javascript, tentem entender o porque o programador fez daquela maneira, pense o que você faria diferente, faça diferente, copie o código e o refaça à sua maneira (depois ogue fora, não vamos colocar no ar coisas que os outros fizeram sem sua autorização). Dessa maneira você passará a entender melhor o que fazer em determinada ciscunstância.
Mesmo os sites mal feitos, são de grande valia para sabermos o que fazer ou não.
Acessem os portais, como o iG, por exemplo, vejam o código fonte, vejam o CSS, tentem entender o porque. Acessem os sites que vocês gostam, acessem o site da Apple, o Submarino, o Youtube (esse tenho certeza que vocês acessam) e estudem o código fonte de cada um deles.
Se não usam o firefox, usem, pelo menos para desenvolver, e instalem o complemento Firebug (vou postar um tutorial em breve sobre) e vejam os comportamentos, o firebug nos ajuda muito a entender o comportamento de um determinado site, nele podemos alterar, por exemplo, a largura de um elemento e ver como fica, isso no próprio navegador, sem a necessidade de abrir um editor, alterar, salvar, recarregar, isso tudo apenas pra ver se fica bom.
Instalem diversos navegadores, Firefox, Chrome, Opera e Safari, pelo menos, testem os sites em cada um deles, não só os que você fez, mas os outros também. Uma das coisas mais difíceis de se programar frontend, é fazer com o que os sites carreguem de maneira igual nos mais diversos navegadores. Nos últimos tempos, mlhorou muito isso, as ainda é muito necessário.
Existem diversos sites que agregam bons sites que podemos acessar e analisar, os acessem. Tem muita coisa acontecendo por aí, que não sabemos.
Enviado por: leandro garcia - Categoria(s): Referências Tags relacionadas: referenciasNos últimos dias algumas vezes me perguntaram como criar uma página no Facebook, motivo este que me fez escrever este post. Vamos lá.
A primeira coisa, é acessar este link e criar uma página. http://www.facebook.com/pages/manage/
Em seguida, você deve preencher os dados requisitados. Que ão: O Nome da página e o tipo de página, se é para uma comunidade, se é para um negócio, um artista ou marca. Para esse exemplo, vou criar a página do blog, e vou preencher como “marca, produto ou organização” vais e abrir um combo com tipos e eu escolhi site.
Em seguida confirmar.
O terceiro passo é preencher o conteúdo básico da página, inserir uma foto, informaçõe, etc.
Inseri uma foto, informações básicas, como ano de fundação, website e uma descrição. Aproveitei e vinculei está página que eu criei ao meu twitter (pra quem não sabe é @leandrogarcia) . Eu podia preencher também meu e-mail para postar coisas nessa página à partir do meu celular, mas deixei pra depois. Ao lado esquerdo, tem um link escreva alguma coisa sobre a página, preenchi também. E pronto, com isso criamos a nossa primeira página no Facebook, bem smples, não.
Agora vamos faxer algum um pouco mais complexo. Vamos criar uma guia, com imagens, links, etc. Como vemos por ai.
Bom, volte ao seu perfil, do lado esquerdo, deve ter aparecido um link anuncios e páginaas, clique nele.
Agora você pode configurar sua página, pra aparece por pais, só pra algumas idades, ou se a página está em contrução e deve aparecer apenas para os administradores, nesse caso, vou deixar aberta para todos.
Aqui você configura o mural, eu deixei o padrão, que pra esse caso serve.
Tem algumas outars configurações que você pode fazer, mas que não são relevantes agora, como configurar a aba de videos.
Vamos para o que interessa, criar uma aba(página) editada por você, com imagens, links, etc.
Lá embaixo, no último item, tem a opção mais aplicativos, que você pode inserir na sua página. No nosso caso, vamos inserir o FBML estático, que está até como sugestão.
Ao clicar no app “FBML estático” se abrirá a página do aplicativo. Lá, abaixo da foto você verá o link, adicionar à minha página.
Depois de adicionar à sua página, volte à area de edição da mesma e você verá um item, “FBML 1″, esse nome é o que aparece na aba da sua página, mas não esquent é simple mudar esse nome.
Clique em editar e pronto, é só construir sua página em HTML, simples não?
Só que, um embed em flash, diretamente não funciona tem que se usar a estrutura de FBML, assim como Javascript, tem que usar FBJS, que são linguagens próprias do Facebook, no entanto, para colocar css, imagens, listas, hs, ps, ou seja, as tags html, não muda nada. é a mesma sintaxe.
Vou alterar o nome da guia para minha primeira página e no corpor vou inserir um título (Minha primeira página) e uma imagem.
Viu como é simples. Veja o código, nada de diferente.
<h2>Minha primeira página</h2> <img src="http://www.leandrogarcia.com/wp-content/uploads/2009/11/fb10-300x93.gif" alt="minha imagem" />
Veja como ficou:
http://www.facebook.com/pages/Blog-do-Garcia/150256105006954?v=app_4949752878
Num próximo post abordarei o FBML e como postar um vídeo do you tube na sua página.
Enviado por: leandro garcia - Categoria(s): facebook, pages Tags relacionadas: facebook, facebook page, fbml, pagesFinalmente, 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.
Enviado por: leandro garcia - Categoria(s): app, facebook Tags relacionadas: aplicativo, app, blog do garcia, facebook, on facebookçã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.
Enviado por: leandro garcia - Categoria(s): Vídeo Tags relacionadas: realidade aumentadaEstou 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/
Enviado por: leandro garcia - Categoria(s): css framework, Frameworks Tags relacionadas: CSS, FrameworksEventualmente 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.
Enviado por: leandro garcia - Categoria(s): cache, PHP Tags relacionadas: cahe, memcache, memcached, PHP