A grande maioria dos desenvolvedores quando entra em um projeto novo, a primeira coisa que acaba se perguntando é: “Qual CMS vou utilizar?”, WordPress, Joomla, Drupal. Ou dado outro momento acabam fazendo tudo do zero para ter um maior controle sob o produto final. Só que existem momentos em que utilizar um CMS ou desenvolver um sistema do zero pode encarecer o projeto, ou até mesmo o próprio cliente não tem budget suficiente para investir em uma ferramenta desse porte.

É nessa hora que entram os Static Site Generators, ou seja, você pode ter o mesmo resultado final, utilizando ferramentas extremamente simples e gratuitas, que no final acabam agradando a todo mundo.

Hoje em dia existem ferramentas desse tipo nas mais variadas linguagens de programação, algumas possuem ferramentas de administração integradas, outras utilizam Markdown para a geração das páginas, cabe a você definir qual delas se adequa melhor ao seu projeto.

Pensando em ajudar a comunidade de desenvolvedores, compilei uma lista de diversas ferramentas no meu Github. Resolvi colocar lá pois assim fica mais fácil das pessoas contribuírem com novas ferramentas.

Se você quer contribuir, faça um Fork do projeto e submeta um Pull Request, vamos fazer essa lista aumentar cada vez mais.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

O Heroku para quem não conhece é um cloud PaaS, onde você pode rodar gratuitamente suas aplicações Ruby, Node.js, Python, Django e outras opções.

O intuito desse post é mostrar a criação de uma simples APP em Node.js e após o deploy da mesma para o Heroku.

Continuando com o tutorial, vou levar em consideração que você possui:

• O Git instalado.
• O Ruby instalado.
• O Node.js instalado.
• Já ter lido o Getting Started with Heroku.
• Uma conta no Heroku (mais que necessário).
• Ter o Heroku toolbelt ou a gem Heroku instalado.

No momento que escrevo esse tutorial, estou utilizando o Windows 7, mas pode ser feito em qualquer sistema operacional. Uma observação, quando instalei o Heroku toolbelt, ele não funcionou aqui, não descobri até agora o por que, desinstalei o mesmo e instalei a gem Heroku, funcionou tudo ok, fica a dica caso alguém passe pelo mesmo problema.

Para saber se o Heroku está funcionando Ok, abra um terminal e digite:

heroku --version

Você receberá uma mensagem do tipo:

Agora vamos criar o nosso aplicativo, não vou criar nada complexo aqui, somente um exemplo de leitura de HTML estático com o Node.js. Para agilizar o processo, coloquei o código no github, vá até o projeto e clone o mesmo para o seu PC.

Duas coisas que você deve se atentar é:

• 1 – Obrigatório o arquivo package.json, onde eu listo a engine que será utilizada, dependências, esse tipo de coisa.
• 2 – Arquivo Procfile, é ele que vai indicar o processo que deve rodar, sem ele não funciona.

Fazendo o deploy da aplicação

Abra o terminal, e vá até a pasta onde você clonou o projeto, siga os passos a seguir:

Crie um repositório git com: git init

Agora adicione os arquivos: git add .

Faça o primeiro commit: git commit -m “first commit”

Agora vamos criar uma nova APP no Heroku: heroku create <nome-da-app>. Substitua em <nome-da-app> por um nome que desejar, aqui utilziei dessa forma: heroku create node-static-files

Mande tudo pro Heroku: git push heroku master

Digite: heroku open e veja sua aplicação funcionando. Veja a minha de exemplo nesse link.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Desenvolver projetos responsivos pode ser tornar chato a partir do momento em que você tem que ficar a todo momento redimensionando o browser para ver como o layout se comporta em diferentes resoluções, além do tempo desperdiçado. Não seria interessante gastar esse tempo com outra coisa e automatizar esses testes?

Com a utilização de Node.js, somado a outras ferramentas isso se torna facilmente possível. Uma dessas ferramentas que irá nos ajudar é o Phantomjs, ele nada mais é do que um “browser” webkit com API JavaScript completa que roda no console. Possui suporte nativo a vários padrões web standards: DOM, seletores CSS, JSON, Ajax, Canvas e SVG.

review

É um módulo para Node.js que funciona em conjunto com Phantomjs para tirar screenshots de sites que você indicar e nas resoluções que desejar, com a vantagem de você ver tudo alí no browser em tempo real. Leia a documentação no site e veja como é fácil utilizá-lo.

Casperjs

Casperjs é uma ferramenta poderosa para gerar scripts de navegação e testes com o PhantomJS. Através de um script simples, podemos indicar um array de resoluções e um site, e o mesmo irá salvar as screenshots em uma pasta no seu HD. O script de exemplo é esse aqui. Com o Node, Phnatom e Casperjs instalado, basta você copiar o script, salve o arquivo em uma pasta qualquer com o nome screenshots.js. Abra o terminal, navegue até a pasta onde esse script foi salvo e execute o seguinte comando:

$ casperjs screenshots.js http://example.com

Susbstitua http://example.com pelo site que desejar, ele irá criar uma pasta chamada screenshots, e dentro estará todas as screenhots com as resoluções que você indicou.

Phantomjs

Esse script depende do Phantomjs e do async.js. Com o Node e o Phantom instalado, instale também o async.js. Depois basta copiar o srcipt e executá-lo conforme indicado. Ele irá fazer o mesmo que o Casper, salvar as screenshots nas resoluções indicadas em uma pasta no seu HD.

Conhece alguma outra ferramenta do tipo? Indique nos comentários.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

É de bom grado você facilitar a vida do usuário no preenchimento de formulários, principalmente quando se refere ao preenchimento de endereços. Você provavelmente alguma vez já deve ter dado de cara com algum formulário onde você só colocava o seu CEP e ele já preenchia os campos restantes automaticamente. Isso em um dispositivo mobile agiliza e muito o processo.

Pensando nisso resolvi criar uma lista com sites que disponibilizam API’s para consulta de CEP e de fácil implementação em qualquer formulário.

Consulta diretamente ao site dos correios

ceplivre

Aviso Brasil

BuscarCep

byJG – WEB Service de CEP

CEP Fácil

Consulta de CEP Gratuita com o Google Maps API

Grep Cep

osGestor

Postmon

ZipFinder

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Se você não conhece o Dropbox, infelizmente você não é desse mundo, ele nada mais é do que um serviço para armazenamento de arquivos baseado no conceito de computação em nuvem, ou seja, a partir do momento que eu envio algum arquivo para os servidores do Dropbox, eu posso acessá-los de qualquer lugar do mundo, desde que eu possua uma conexão com a internet.

Mas a coisa chegou a um ponto tão interessante que é possível hospedar sites estáticos. Hoje em dia existem vários sites que lhe auxiliam a fazer isso, bastando você autorizar o mesmo e em menos de 5 minutos você tem um site rodando. Abaixo vou deixar uma lista com os sites que fazem esse tipo de serviço:

Site44

Pancake.io

DropPages

KISSr

Chili

Drapache

Conhece algum outro serviço além dos listados acima? Deixe o link nos comentários.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Se você é um desenvolvedor antenado provavelmente já deve ter ouvido falar do Jekyll. Ele é um sistema em Ruby extremamente simples para desenvolvimento de sites, especialmente blogs, sem a utilização de um banco de dados.

Mexer com Jekyll é tão simples que após você criar o seu layout, você pode se concentrar em somente escrever seus posts, sem ter que ficar se preocupando com banco de dados ou outras coisas. Para rodá-lo, primeiramente você deve ter o Ruby instalado no seu PC, caso não tenha ele instalado, vá até o site RubyInstaller for Windows e execute o instalador, basta ir seguindo os passos (Não se esqueça na instalação de marcar a opção de Incluir as variáveis PATH no sistema).

Para saber se o Ruby está instalado corretamente, abra um prompt de comando e digite o seguinte:

ruby -v

Você verá uma mensagem do tipo:

Teoricamente agora, com o Ruby instalado, instalar o Jekyll seria simples:

gem install jekyll

Mas recebemos aí uma mensagem de erro, pois ainda não temos o Development Kit instalado, portanto, faça o download do Development Kit e descompacte para uma pasta qualquer. Aqui no meu PC, deixei da seuignte forma: C:\RubyDevKit.

No prompt de comando, vá até a pasta do RubyDevKit e digite o seguinte:

ruby dk.rb init

E depois:

ruby dk.rb install

Pronto, agora sim podemos instalar o Jekyll:

gem install jekyll

Depois, instale o rdiscount:

gem install rdiscount

Temos que instalar também o Python, pois o pygments(Uma espécie de ‘plugin’ para syntax highlighting) precisa dele. Basta fazer o download do instalador do Python e ir seguindo os passos. Não se esqueça de selecionar a opção Add python.exe to Path:

Aqui no meu PC, mesmo após a opção estar selecionada, as variáveis não foram adicionadas ao Path do sistema, portanto, aconselho você a verificar se foi adicionado corretamente antes de prosseguir. Eu tive que adicionar o seguinte: C:\Python;C:\Python\Scripts;. Python é o local de instalação do meu Python, altere conforme o local da sua instalação.

Abra um prompt de comando e veja se o python foi instalado corretamente, basta digitar python:

Estando tudo ok, temos que instalar o easy_install, basta fazer o download do distribute_setup.py nesse link. Descompacte o mesmo em alguma pasta, abra um prompt de comando, vá até a pasta onde está descompactado o distribute_setup e digite o seguinte comando:

python distribute_setup.py

Agora podemos instalar o pygments:

easy_install pygments

Se tudo ocorreu ok, já temos o ambiente necessário para rodar o Jekyll, vamos fazer o download de um template de exemplo, descompacte o mesmo para uma pasta jekyll, abra um prompt de comando, vá até essa pasta jekyll e digite o seguinte:

jekyll

E depois:

jekyll --server

Para ver seu site funcionando, acesse a seguinte URL: http://localhost:4000/

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Alguns tipos de requisição na API do Instagr.am requer que você tenha um Access Token, pra isso você deve ir na central de developers do Instagr.am, registrar uma aplicação e depois autorizála só para obter um token.

Dado momento isso acaba se tornando chato, e foi pensando nisso que criei um gerador de access token para Instagr.am para facilitar esse processo. Basta clicar em Get Token, autorizar o aplicativo e ele te retorna o Token.

Caso queira obter somente o ID do usuário, basta utilizar essa outra ferramenta.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

O que essa salada de frutas tem haver com Handlebars? Lembram-se que no meu último post citei que estava estudando o Handlebars e havia achado ele bem interessante? Então, acabei fazendo algumas coisas, simples por sinal, utilizando as APIs do: Twitter, Youtube e do Instagr.am.

Tweetbars

Uma forma de mostrar seus últimos updates do Twitter com jQuery e Handlebars como sistema de templates.

• Exemplo
• Download

Youtubars

Quer mostrar as últimas atualizações do Youtube de determinado usuário? Também é possível.

• Exemplo
• Download

Instaphotos

Aqui utilizo além de jQuery e Handlebars, PHP para manipular a API do Instagr.am, onde é possível mostrar as últimas fotos que um determinado usuário postou.

• Exemplo
• Download

A documentação para cada projeto você encontra em seu referido reposítório no meu github.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Handlebars.js é um sistema de templates em JavaScript que lhe dá o poder necessário para desenvolver templates semânticos sem frustração alguma. Ele é uma extensão do famoso sistema de templates Mustache criado por Chris Wanstrath (Co-fundador do Github).

Handlebars.js e Mustache são dois sistemas de templates lógicos que tem a função de separar os “views” da sua lógica, assim como realmente deveria ser feito, ou seja, chega de ficar concatenando variável com HTML. Ele é muito simples de usar e fácil de aprender, tenho mexido bastante com ele ultimamente e estou achando bem interessante.

Poderia fazer aqui um imenso tutorial sobre Handlebars, mas iria se tornar cansativo, portanto, vou deixar aqui algumas referências que foram onde comecei a aprender sobre ele:

Getting Started with Handlebars.js

Uma série divivida em 3 tutorias onde é possível aprender bastante coisa sobre Handlebars, desde o básico, passando por Partials and Helpers e algumas outras dicas valiosas.

Handlebars.js minimal templating on steroids

Esses slides são bem interessantes pois mostram de uma forma simples como trabalhar com blocos de expressão, argumentos, helpers (o grande forte do Handlebars).

Handlebars.js + external JSON

Tutorial interessante para você trabalhar com dados JSON externo.

Handling handlebars.js like a pro

Nesse tutorial Tal Bereznitskey mostra como é possível você criar seu template e guardá-lo em um arquivo externo para uso posterior. Ou se preferir, um outro tutorial no issue do Github.

Handlebars, and why you should consider a templating engine

Raymond Camden mostra aqui com exemplos reais o por que você deve usar Handlebars.js como seu sistema de templates.

Keeping your Handlebars.js templates organized

Algumas dicas para manter os seus templates organizados.

Plugin jQuery Para Handlebars

Plugin jQuery para facilitar a sua vida na criação de templates e na manipulação dos dados jSON.

Try Handlebars.js right now in your browser

Quer testar seus templates diretamente no browser? Sim, é possível.

Espero que divirtam-se com as referências.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Com o crescimento de JSON, especialmente em serviços Web e também em aplicações Ajax, utilizar JavaScript templates permite a você uma forma fácil de interpretar HTML e substituir com conteúdo criado ou recebido através do JavaScript.

Existem vários plugins de template para JavaScript, portanto, resolvi fazer uma compilação aqui com alguns que encontrei na internet.

mustache.­js

Mustache.js é uma implementação do já conhecido sistema de templates Mustache, só que para javaScript.

Jade

É um sistema de templates de alto desempenho fortemente influenciado pelo Haml e implementado com JavaScript para Node.js.

Handlebars

Te dá a possibilidade de produzir templates semânticos sem qualquer frustração. Templates do Mustache.js são compatíveis com Handlebars, portanto, você pode criar um template em Mustache, importá-lo no Handlebars e maipulá-lo conforme necessário.

Hogan.­js

É o sistema de templates criado pelo Twitter com só 2.5k.

do­T.­js

O mais rápido e simples sistema de templates em JavaScript para Node.js e browsers.

Js­Render

Próxima geração de templates para jQuery, otimizado para alto desempenho e com processamento baseado em strings.

t.­js

Sistema de templates muito simples com aproximadamente 400 bytes em gzip.

Eco

Permite incorporar a lógica CoffeeScript em sua marcação. É como EJS e ERB, mas com CoffeeScript dentro do < % ... %>. Você pode utilizá-lo para renderizar seus views no Node.js no servidor, ou complitar seus templates JavaScript para mostrá-los no browser.

dustjs

Sistema de template assíncrono para ser usado com Node.js ou no browser.

Transparency

Sistema de template extremamente simples para ser rodado no browser. Mapeia objetos JSON para o DOM sem configuração alguma.

ICan­Haz.­js

Sistema de templates simples e poderoso. Pode ser usado com Mustache, jQuery ou Zepto.

Qote2

Segundo maior release já lançado para ser usado com jQuery. Corrigiu vários bugs de sua versão anterior.

Twig.­js

Versão JavaScript da biblioteca de templates Twig.

grips

Sistema de templates simples e lógico.

Mask­JS

Markup/Template Engine. Simples e semântico

Architect

Javascript Template Editor Web app para editar templates em varias engines.

JUST

Cacheia os templates automaticamente e os recarrega assim que são feitas alterações. Pode ser usado com Node.js ou no browser.

Templ8

Sistema de templates em JavaScript com o estilo de sintaxe do Django. É rápido e leve ao contrário de muitos outros sistemas de template.

EJS

Sistema de templates que promete limpar o HTML do seu JavaScript.

ist.­js

Sistema de templates baseado em DOM com sintaxe de seletores CSS.

templayed.js

jquery-tmpl

Sistema de templates para jQuery desenvolvido pelo time da Microsoft.

Anglebars.js

Uma mistura de Angular.js e Handlebars.

Pure

Tempo

haml-js

JavaScript templates no lado servidor. Usado com Node.js.

Stencil

Criado por Andy VanWagoner, pode ser rodado tanto em Node.js como no browser.

Parrot

Template JavaScript extremamente rápido e leve para ser usado com Node.js.

Closure Templates

Sistema de templates criado pelo Google criado para rodar tanto no cliente como no servidor.

Nun

JavaScript templates no lado servidor. Usado com Node.js.

Mu

JavaScript templates para Node.js baseado em Mustache.js

KiTE

JavaScript templates muito parecido com Mustache.js

Underscore.js

Bbiblioteca para manipulação de dados extremamente poderosa que possui somente 4kb.

JavaScript Micro-Templating

É um micro sistema de templates criado por John Resig, o mesmo criador do jQuery.

supplant.js

É um sistema de templates simples, mas muito simples mesmo, seu tamanho é de aproximadamente 250 bytes.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

A alguns dias atrás fiquei conhecendo o Chilegram, um site onde você pode ver a últimas fots do chile no Instagr.am. Quanto a isso tudo bem, só que resovi fazer a versão brasileira: Brasilgram.

Como já havia mostrado aqui anteriormente a trabalhar com a API do Instagr.am, foi fácil fazer a coisa funcionar.

Por padrão ele carrega as últimas fotos com a hashtag brasil, mas ao clicar no menu você pode escolher o seu estado. Experimente. Caso queira fazer o download do código ele está lá no github.

PS: Experimente buscar fotos do Acre, sim, ele existe.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

A partir do momento em que você começa a desenvolver aplicações com JavaScript, dado momento você pode precisar fazer várias requisições Ajax e não faz sentido você trabalhar com os resultados somente depois que todos eles retornarem. Vou citar um exemplo para que você entenda melhor: Imagine o cenário onde você quer pegar os Tweets de 3 usuários diferentes e mostrá-los em sua interface. Com jQuery, para obter os tweets de um usuário, você poderia fazer dessa forma:

$.get("https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=username&callback=?", function(tweets){
    // código JavaScript aqui
},"jsonp");

Para obter os tweets de 3 usuários, você teria que fazer 3 requisições $.get separadas. Uma vez que cada chamada é executada de forma assíncrona, sem a garantia de quem retornaria primeiro, o código para coordenar a resposta para as 3 requisições seria uma confusão.

Isso foi solucionado a partir do jQuery 1.5, cada uma das funções ajax foi alterada para retornar um objeto Deferred que gerencia os callbacks para cada requisição. O poder de Deferred fica aparente quando usado em conjunto com a função $.when. jQuery.when aceita qualquer número de objetos Deferred e permite que você atribua callbacks a eles quando esses objetos Deferred são resolvidos.

Provavelmente você deve estar confuso quanto a isso, mas fica claro aplicado a um cenário real:

$.when(getTweets('pinceladasdaweb'), getTweets('techcrunch'), getTweets('microsoftbr')).done(function(pinceladasArgs, techcrunchArgs, microsoftArgs){
		var allTweets = [].concat(pinceladasArgs[0]).concat(techcrunchArgs[0]).concat(microsoftArgs[0]);
		var sortedTweets = shuffle(allTweets);
		
		showTweets(sortedTweets);
	});

var getTweets = function(user){
    	var url='https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=' + user + '&callback=?';
    	return $.get(url, {count:5}, null, 'jsonp');
	}

Utilizo um método, getTweets, que retorna o valor de uma chamada $.get, esse será um objeto Deferred representando uma chamada no servidor do Twitter.

Depois utilizo $.when passando meus três objetos Deferred, ou seja, as 3 requisições Ajax.

Após utilizo .done() para manipular as requisições Ajax assim que todas elas forem completadas.

A função .done() recebe um argumento para cada uma das requisições ajax. Cada argumento contém uma matriz de argumentos que seriam passados ​​como callbacks para a função success do ajax. O callback success de $.get espera 3 argumentos: data, textStatus, e jqXHR. Portanto, o argumento data para a chamada @pinceladasdaweb está disponível em pinceladasArgs[0] e assim por diante.

Depois combino todos os tweets dentro de uma matriz(allTweets), de todas as requsiições feitas ao Twitter.

A partir de agora sou capaz de trabalhar com uma única coleção, contendo dados de 3 requisições Ajax, sem escrever qualquer código de sincronização.

Nesse link vocês podem ver um exemplo em funcionamento.

Atenção: Esse post é uma adaptação do original – Coordinating multiple ajax requests with jquery.when

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Hoje em dia nós temos widgets para mostrar as últimas atualizações do Twitter, ou se quiser, a quantidade de seguidores de um perfil. Temos também aquele box horrível do Facebook, mas e para o Instagr.am?

Até agora não tinha achado nada de interessante para mostrar no site em relação ao Instagr.am, a não ser um botão que poderia te levar até seu perfil. Ok, tudo bem, eu posso utilizar a API e mostrar algumas de minhas fotos, mas e seu quiser, por exemplo, mostrar meu número de seguidores, número de pessoas que eu sigo ou outras informações relevantes?

Foi com base nisso que desenvolvi com jQuery um sistema de Widget para mostrar essas informações. Já havia mostrado em um post anterior como trabalhar com a API do Instagr.am, portanto, agora foi fácil, só acrescentei mais algumas informações.

Criei basicamente 2 exemplos, e vou deixar aqui o link de download para os mesmos para que você possa customizar a seu gosto.

• Exemplo 1 – Download
• Exemplo 2 – Download

A primeira coisa que passou pela sua cabeça ao olhar os exemplos foi, mas você disse que era um Widget, como vou colocar um bloco desse tamanho no meu site? Como disse anteriormente, os links de download estão logo acima, customize o layout conforme necessário. Logo no começo do arquivo lib.js você vai encontar uma variável chamada username, altere para seu usuário do Instagr.am e seja feliz.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Pernambuco no próximo dia 1 de dezembro de 2012 será sede de uma dos maiores eventos de Front End do Brasil, senão do mundo, onde ao lado da Praia de Boa Viagem acontece o Feecbr.

O FEEC BRAZIL é uma convenção para profissionais de internet de diversas áreas, idealizada por um grupo experiente, reconhecido pela qualidade e grau de inovação de projetos educacionais e eventos realizados no Nordeste do Brasil.

Cientes de que a região nordeste do Brasil passa por um momento de consolidação econômica e apresenta diversas oportunidades na área, nosso grupo decidiu promover uma convenção para profissionais de internet, buscando criar um ambiente capaz de desenvolver pessoas, integrar empresas e instituições de ensino, bem como difundir as melhores técnicas de desenvolvimento utilizadas ao redor do mundo.

O FEEC BRAZIL tem como proposta a realização de um evento capaz de atingir altos níveis de satisfação pelos participantes e parceiros patrocinadores, reforçando a capacidade de inovação com qualidade já demonstrada em outras iniciativas do grupo.

O público-alvo engloba desenvolvedores web, front-ends, back-ends, designers, analistas de mídia social, gestores e demais profissionais que estejam envolvidos com desenvolvimento de projetos e aplicações para internet e mobile, atualmente desafiados para encontrar soluções que aumentem a produtividade de seus times, agradem seus clientes e agreguem novas experiências para os usuários finais, tudo com qualidade, agilidade e baixo custo.

Abaixo você vê a listagem dos palestrantes, nacionais e internacionais:

Nos veremos lá.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Se em algum momento você quer alguma interação com o usuário ao ele clicar no botão like do Facebook, ou dar algum feedback para o mesmo, existe uma maneira muito simples para se fazer isso. Basta utilizar os eventos edge.create para quando o usuário der um like e edge.remove quando o usuário der o unlike.

Para que fique mais fácil de você entender, basta observar o código abaixo:

Quando o usuário der like, utilize o seguinte código:

FB.Event.subscribe('edge.create', function(href, widget) {
    //Faça alguma coisa complexa aqui.
}); 

Quando o usuário der unlike, utilize o seguinte código:

FB.Event.subscribe('edge.remove', function(href, widget) {
    //Faça alguma coisa complexa aqui.
}); 

O código completo para um botão de like com alguma interação você pode ver abaixo:

O HTML:

<div class="fb-like" data-href="http://www.pinceladasdaweb.com.br/blog/" data-send="false" data-width="450" data-show-faces="false"></div> 

O JavaScript:

window.fbAsyncInit = function() {
        FB.init({appId: '187145021356372', status: true, cookie: true, xfbml: true});  
	FB.Event.subscribe('edge.create', function(href, widget) {
		alert('Legal, você curtiu o link: ' + href);
	});
	
	FB.Event.subscribe('edge.remove', function(href, widget) {
    	alert('Acabei de ficar triste');
	}); 
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Observe o funcionamento nesse exemplo.

Também é possível atrelar isso ao Google Analytics, para você saber como o redimento dos botões no seu site/blog. Para isso, utilize o seguinte código:

window.fbAsyncInit = function() {
    FB.init({appId: '151793854911855', status: true, cookie: true, xfbml: true});  
    FB.Event.subscribe('edge.create', function(href, widget) {
        _gaq.push(['_trackSocial', 'Facebook', 'Facebook like', href]);
   });
    FB.Event.subscribe('edge.remove', function(href, widget) {
        _gaq.push(['_trackSocial', 'Facebook', 'Facebook unlike', href]); });        
  };


(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Observe o funcionamento nesse exemplo. Dê uma olhada no código fonte da página caso tenha ficado com alguma dúvida.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?