Facebook:

Amigos leitores,

Tenho postado pouco mas procuro postar coisas que sejam realmente úteis ao dia-a-dia de desenvolvedores, que felizmente hoje se espalham por todo o Brasil.

Há alguns meses, desde 2011, passei a conhecer e explorar a API do Facebook que é gratuita e aberta para qualquer pessoa. Os manuais, exemplos e tutoriais eram demasiadamente escassos e só havia conteúdo bom no próprio Facebook ou no StarckOverflow. Enxerguei no Facebook uma grande oportunidade e estive me especializando nele, foi desta experiência nova que surgiu o app Classibuck (http://apps.facebook.com/classibuck). Pra quem ainda não sabe o Classibuck (também conhecido como Classibook) é um classificados dentro do Facebook com vários recursos inovadores entre eles a possibilidade do usuário criar uma página só de anúncios próprios e criar um site de classificados gratuitamente inteiramente gerenciado pela app e disponível para o mundo todo, convidando assim seus anunciantes, clientes e amigos para participar.

O blog continua, e vamos agora explorar o que o Facebook tem pra oferecer. Se você que está lendo esta postagem tem interesse em assuntos relacionados ao Facebook, em português, claro e rápido, registre isto nos comentários ok?

Até lá!

 

Como criar um produto para a Web de sucesso?

Muitas coisas vem acontecendo simultâneamente na Internet e tem muitas teias de aranha aqui! Vou tirá-las registrando alguns pontos de vista que são resultado de observações que venho fazendo diante de tudo isso.

A Internet está uma verdadeira feira livre de rua daquelas que os vendedores tentam ganhar o cliente no grito, mas talvez o cliente bom pagador seja conquistado pelo vendedor que grita menos e pensa mais. Este é um assunto completamente atual, que exige análises, passivo de instabilidades, e que envolve muito, mas muito dinheiro. Let’s go!

Bom, de dois mil e bolinha pra cá alguns milionários estão lidando com muitas cifras e com muita gente também. Eles são donos de produtos e serviços da Web que deram certo e que de forma avassaladora engordaram suas contas bancárias.  O que eles fizeram para isto? Bem, eles foram brindados por uma idéia revolucionária que caiu no gosto popular. O Google, Orkut, Wikipedia, You Tube, WordPress, Facebook, Twitter, Foursquare… dentro de algumas décadas serão futuros dinossauros grandes que porque criaram não só sistemas legais de usar mas porque criaram tendências e conceitos; foi o que a Microsoft, Apple e a IBM fizeram há algum tempo não muito longe atrás e se tornaram bilionárias.

Existe fórmula para o sucesso de um Startup? Não, assim como não existe fórmula para nenhum sucesso na TV, nem na música, mas como informática é pura Matemática, algumas pessoas inteligentes podem combinar algumas premissas e tirar algo disso tudo. É o chamado “caminho das pedras”.

TOP 10 DE ALGUMAS SIMILARIDADES ENTRE PRODUTOS / EMPRESAS DE SUCESSO

  1. Foram revolucionários
  2. Foram criadores de conceitos e tendências
  3. Foram inovadores
  4. Tiveram potencial de expansão a nível global
  5. Não tiveram obrigação de ser útil
  6. Proporciona algo para humanos, nem que seja a distração
  7. São independentes uns dos outros
  8. Possuem palavras-chave exclusivas e também independentes. Quer ver?
    • Google: busca, procura, pesquisa
    • Facebook e Orkut: rede, social, perfis, compartilhamento, comunidades
    • Twitter: microblogging, seguir, DM, twitar, topics, trending, listas
    • Foursquare: explorar, lugares, locais, check-in, selos
    • Wikipedia: enciclopédia, informação, colaboração,
    • You Tube: video, tube, streaming, upload
    • Peixe Urbano, Privalia, Groupon: compra coletiva, descontos, off
    • Mercado Livre: venda, troca, classificados, anúncios, Mercado-Pago
  9. Fizeram de seus usuários “zumbis” fiéis
  10. Foram criados com amor e perseverança

Se você quer ganhar dinheiro de verdade com algum Startup você deve se focar que seu produto tem que ter o poder de quando alguém pensar em algo ser remetido a ele em menos de 1 segundo. Exemplo: video -> You Tube, busca -> Google, notícias -> Twitter.

Outra coisa é que é crucial a questão da expansibilidade. Pensar grande faz você crescer. Almejar o sucesso todos os dias faz você ter estímulo e conquistar algumas coisas. Uma solução restrita ao âmbito local sem possibilidade de expansão para uma esfera global só manterá você daquele tamanho, pequeno. O Facebook começou criando e unindo perfis de Harvard, mas com a atenção que chamou tava na cara que se ele podia reunir pessoas lá poderia reunir em várias faculdades, e se poderia reuní-las em várias faculdades poderia reuní-las no mundo todo.

A história está se desenhando neste exato presente. No começo de 2011 pessoas fecharam contas no Orkut e migraram para o Facebook, mas por que não manter a conta lá? Particularmente penso que o motivo dessa migração dizendo “adeus” seja porque talvez o usuário já adquiriu um nível de entrosamento e maturidade elevado com a Web. Ele está tão envolvido com tecnologia, sites, serviços, e tantas coisas que ele pode fazer pelo seu navegador, que hoje ele sabe o que quer e o que não quer mais usar, o que lhes é útil ou legal e o que não é. Ah, também tem o fato de que ele pode ir mais com a cara do Facebook do que com a do Orkut :) (leia-se: sistema mais bonito sistema mais atraente). Se o usuário achar mais fácil usar um site ao invés de outro com a mesma funcionalidade ele não vai tentar aprender, ele vai abandonar o mais difícil.

O Google é um exemplo perfeito, começou com uma busca e hoje tornou-se uma gigante com vários produtos de sucesso dentro dele embutidos. Virou companhia. Expandiu. Transformou-se. Será esse o destino de uma Startup de sucesso? Agregar subprodutos? Pode ser.

E você está tentando criar seu produto de sucesso? Está dando certo? Que dificuldades enfrenta? Deixe aqui sua experiência.

“Introdução ao HTML 5 e CSS 3″ vai à FATERN Gama Filho

Pessoal acabo de receber a “pré-grade” com a confirmação do horário da palestra de sexta que vem “Introdução ao HTML 5 e CSS 3″ na FATERN, será o seguinte:
.


Local: Auditório da faculdade FATERN GAMA FILHO (Av. Eng. Roberto Freire antes do Praia Shopping);
Horários: Sexta-feira dia 19, de 19h ás 20h;
Público-alvo: curiosos, estudantes e profissionais da area de T.I mais especificamente a de Web;
Valor: R$ 20,00 com direito a participação nas palestras e mini-cursos;
Baixe aqui a pré-grade de horários.
Para inscrever-se ou visitar o site (ainda inacabado) vá por aqui.

Se você é IVIAno entre em contato comigo pelo henrique.araujo@ivia.com.br pois tem novidade!

Porque você deve ir

O HTML 4 quando em sua forma pura era antes de mais nada desorganizado e pesado. O surgimento de sua vertente, o XHTML, escreveu uma nova página na história do desenvolvimento para a Web. Formou o alicerce de tudo que vemos hoje na tela e organizou consideravelmente as aplicações e o universo em que se mergulhava a especificação 4.

O CSS por sua vez, com o uso do XHTML chegou para enxugar as páginas, limpando tudo quanto era estilo por lá e botando cada coisa em seu lugar. Era o começo do desenvolvimento front-end mais inteligente, bem estruturado, clean, semântico (cooperação humano – computador) e lógico. Era portanto o XHTML fazendo a estrutura da página de forma organizada e limpa e o CSS segurando tudo quanto era estilo de forma separada e não menos organizada.

HTML 5 e CSS 3 formarão um par muito mais ligado logo mais. São as mais recentes evoluções das bases do desenvolvimento Web e num futuro não muito distante o profissional que não se atualizar perderá oportunidades cruciais. Sendo assim, quanto mais cedo o contato, mais conhecimento e mais poder de qualidade.

Conto com sua presença nesse encontro tão bacana, até Sexta!

Palestra no IT DAYS 2010 da IT Cursos

Olha só que bacana…

Neste Sábado dia 30 vou dar uma palestra com o tema “Uma Introdução ao HTML 5 e CSS 3″ às 15:40h no evento IT DAYS 2010 criado pela IT Cursos.

A escassez de informação acerca de HTML 5 e CSS 3 é muito alta portanto será uma boa oportunidade para você que trabalha com Web, seja Back ou Front end, pegar tudo mastigado e levar suas dúvidas (ou tirar as alheias!).

Então, você está convidado. Lembre-se que são duas tecnologias recém chegadas ao mercado que prometem revolucionar.

Entre várias outras coisas que estou preparando, uma delas é que mostrarei algumas das principais mudanças entre o atual e o novo, implementarei e testarei ao vivo com a galera, farei alguns exemplos e explicarei tudo nas entrelinhas ;) Também irei falar sobre impactos e barreiras de cada uma.

Será um valor de R$ 30,00 para pessoas de fora e R$ 15,00 para alunos. Veja abaixo mais detalhes. Eu conto com sua presença!

Site do Evento

Local

Data e Horário

  • Sábado, 30 de Outubro às 15:40

Programação

08:30 ABERTURA
08:40 Giovanni Barros Diagramação com Indesign e Quark
09:30 Mara Melo Fotografia para Design
10:20 Coffee-break
10:50 Brito Junior Flash como Ferramenta de Animação
11:40 Alisson Medeiros HTML + DHTML Além de uma marcação
12:30 Intervalo
13:30 Eryckson de Lima Rádio WEB
14:20 Alinne Fernandes Revolução Digital: tendências e realidade atual
15:10 Coffee-break
15:40 Henrique Araujo Uma Introdução ao HTML5 e CSS3
16:30 Karlisson Bezerra Efeitos em Javascript
17:20 Encerramento

Inscrições

Artigo meu na Informática em Revista N° 51

Opa! Acabei de saber que a revista potiguar de maior destaque pelas redondezas, a Informática em Revista, publicou um artigo meu nesta edição de Outubro, que coinscidentemente é meu aniversário. Neste artigo eu falo sobre usabilidade e cuidados na hora de desenvolver o front-end dos web sites. A matéria é entitulada “Usabilidade: seu site pode conquistar ou espantar”.

Para ler o artigo siga por aqui.

;)

Filmes do FLASH (.flv) com acesso negado em servidor (erro 403)

Olá!!!

Depois de uma pausa estamos aqui de novo. Bom, esta semana ao trabalhar no novo site do Brasil-ID projeto que trouxemos para a responsabilidade da SET-RN – e minha também – ,  me deparei com o seguinte:

1. Importava um video FLV para o Flash CS4;
2. Criava um player;
3. Salvava tudo;
4. Rodava no navegador (sem servidor mesmo) e o vídeo estava lá bonitão rodando;
5. Quando eu abria a mesma página mas pelo IIS em localhost: ué o filme FLV não pode acessar o SWF? Mas que diabos…

Se você abrir no navegador, em servidor local ou Web, o video FLV você não conseguirá assisti-lo mesmo ele estando fisicamente lá; você verá a página “HTTP 403 Proibido”, se você acessa a página onde inseriu o <Object> do seu vídeo você verá uma mensagem do navegador avisando que houve acesso negado na comunicação entre o SWF e o FLV ou de acesso negado ao FLV.

Tudo bem, o que ocorre é que ao se tentar rodar um servidor seja local ou na Web, este servidor não sabe o que é o arquivo FLV pois não o conhece na lista de arquivos aceitos, e é aí onde mora o segredo: Mapeamento MIME. A solução está na inclusão de um novo tipo de arquivo MIME:

MIME (Multipurpose Internet Mail Extensions) é uma maneira de configurar clientes de email ou navegadores para exibir arquivos que estão em vários formatos com base em um tipo de MIME. Mapeamento de MIME é um processo pelo qual o IIS mapeia arquivos por suas extensões para um determinado tipo de MIME. Por exemplo, um arquivo com uma extensão .htm tem um tipo de MIME de “text/html”, enquanto um arquivo com uma extensão .gif tem um tipo de MIME de “imagem/gif”. (Microsoft Support)

Simples, basta abrir o IIS, entrar nas Propriedades do seu site, depois vá em Cabeçalhos HTTP, procure por “Mapeamento MIME” depois “Tipos de arquivo…”. Inclua lá:

Extensão associada: .flv e Tipo de conteúdo MIME: video/x-flv

Pronto! Os vídeos serão reproduzidos em seu servidor agora! ;) Fácil assim!

Como instalar e customizar o reCaptcha em seu site

Olá todos, como vão? Faz um certo tempo desde o último “como fazer isto“, mas estou de volta a ativa.

Eu tenho trabalhado num projeto meu que posso dizer que é um peixe grande, um brinquedo para as horas vagas com o qual estou me divertindo muito e aprendendo bastante coisa. Em breve vocês irão ouvir falar dele, e vão ouvir falar muito mesmo! :P

Bem, trabalhando nele nestes dias eu precisei instalar um sistema de Captcha que fosse seguro e robusto, daí vem a primeira pergunta:

Ah Henrique, então porque você não usa o Simple Captcha?

A resposta: porque o Simple Captcha, como o próprio nome já diz é simples demais.

Tudo bem, eu poderia aproveiar a oportunidade para melhorar o Simple Captcha, até lançá-lo como produto grande, mas eu acho que o Simple Captcha já cumpriu a missão para a qual foi inventado, que foi proporcionar a compreensão de como funciona um sistema de Captcha. Deixemos ele aonde está.

Pois bem. Nas minhas recentes andanças pelo Google descobri o reCaptcha, um produto que está virando febre na internet, gratuito, seguro e usado pelo nosso conhecido Facebook.

A mini-saga para você colega webmaster começar a usá-lo consiste inicialmente em você se cadastrar no site do reCaptcha, pra isso acesse aqui.

O reCaptcha foi comprado recentemente pelo Google e basta que você informe um login e uma senha (que não precisam ser do Gmail) e pronto, de forma mágina o Google já te manda rapidinho de volta á pagina do reCaptcha e você começa as suas configurações.

Informado um login e senha você verá um novo cadastro, desta vez um campo pedindo para você informar o domínio (url) do seu site (ou do site no qual vai usar o captcha). Isto é necessário para que você crie uma chave de segurança de forma que só você e o seu site tenham acesso ao seu próprio sistema de captcha.

Domínio informado? Então você verá uma tela com as seguintes informações:

Domain Name: seusite.com.br
reCAPTCHA will only work on this domain and subdomains. If you have more than one domain (or a staging server), you can create a new set of keys.

Public Key: 0Lfiw8kSAAAAAhDpQFVUIZowO1F70taOZDKGnlZB
Use this in the JavaScript code that is served to your users

Private Key: 0Lfiw8kSAAAAAPKvnjQtE4EtaVQX6hpAisaHcJAI
Use this when communicating between your server and our server. Be sure to keep it a secret.

Pra você que não sacou o ingles aí eu explicarei o sentido dessas chaves no final, então vamos em frente…

Baixando e testando

Vamos supor que o seu site seja PHP, vamos usar este formato, que é mais comum, como exemplo neste post.

Entre aqui e faça o download dos códigos necessários para o sistema funcionar no seu site. Baixe este pacote em algum lugar fácil do seu computador, em seguida como sugestão você pode enviá-lo para um diretório de testes no seu site. Lógico que você vai mandar tudo descompactado. ;)

Dá uma olhada como ele já está funcionando em seu servidor, acessando a página: example-captcha.php. Só por esta página já fica simples instalar ele no seu site, mas nada melhor do que um tapa no visual dele, não acha?

Nos arquivos que baixou, ache o arquivo: “recaptchalib.php”. Agora coloca no lugar certo do seu site (geralmente uma pasta “incs” ou “includes”), onde você guarda os arquivos que costuma chamar por referências nas demais páginas.

Instalando e customizando

Na página que você recebe o formulário para onde será submetido com o sistema de captcha, faça mais ou menos o seguinte:

<?
include("includes/recaptchalib.php");
$captcha = $_POST["recaptcha_challenge_field"];

//Neste trecho você vai validar a entrada do usuário
$publickey = "6LdVPgwA555AAABkfsQ-gHhJFOpj7WGGFWnqfnabc"; //sabe aquelas chaves informadas ali encima? aqui você cola a sua Public Key fornecida.
$privatekey = "6LdVPgw555AAAKDm4uuZyAhjZMwUN7qmEjhISabc"; //e aqui você coloca a sua Private Key.
$resp = null;
$error = null;
$resp = recaptcha_check_answer ($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]);

 if ($resp->is_valid) {
  echo 'Parabéns, palavras corretas!';
  exit(); 
 } else {
  $error = $resp->error;
  echo 'As palavras digitadas na imagem não foram informadas corretamente!';
  exit(); 
 }
?>

Entendeu mais ou menos? Esta será a resposta proveniente do sistema do captcha, você deve ajustar de acordo com a atual resposta do seu formulario, ok? Prosseguindo…

Vamos a interface. Instala em seu form algo parecido com isso aqui:

<?
$publickey = "6LdVPgwA555AABkfsQ-gHkJFOpj7WGGFWnqfnaabc"; //repita novamente a sua Public Key
$privatekey = "6LdVPgw555AAAKDm4uuZyAhjZMwUN7qmEjhISabc"; // repita tambem a sua Private Key
?>
<-- Este script formata respectivamente: o tema visual será customizado, a linguagem deve ser portugues e que o nome do tema é 'recaptcha_widget'. Recomendo não alterar isto. -->
<script>
var RecaptchaOptions = {
   theme: 'custom',
   lang: 'pt',
   custom_theme_widget: 'recaptcha_widget'
};
</script>

<form action="recebe_form.php" method="post">

<div id="recaptcha_widget" style="display:none">

<!--Aqui é onde será gerada a imagem automaticamente pelo sistema (não precisa alterar)-->
<div id="recaptcha_image"></div>

<br>
<!-- Aqui o campo para o usuario digitar as letras (também não altere) -->            
<input type="text" id="recaptcha_response_field" onblur="verificaCaptcha()" name="recaptcha_response_field" />
&nbsp;
<!-- Link para o usuário trocar de imagem caso não consiga visualizá-la bem -->
<a href="javascript:Recaptcha.reload()">Trocar imagem</a>
</div>
<!-- Script de responsabilidade deles...(não precisa mexer) -->
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=<?= $publickey ?>&lang=pt"></script>
<noscript>

<!-- Este iframe é o que faz você enxergar o resultado visual na sua pagina -->
<iframe src="http://api.recaptcha.net/noscript?k=<?= $publickey ?>&lang=pt" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>        
</form>

Bom, vamos ao segredo das chaves. A primeira chave “Public Key” é um protocolo entre seu site e os servidores do reCaptcha. É como os servidores identificarão que a solicitação do seu site realmente parte do seu site.
A segunda chave “Private Key” é a comunicação entre você e eles. Esta podemos deixar de lado pois será usada somente pelo arquivo que referenciamos no recebimento dos dados do form. Ah, não precisamos incluir esta referencia para o form.

Pronto! Você já tem condições de testar e brincar aplicando seus estilos, validações e demais formatações. Viu como foi simples? O que achou do reCaptcha? Comentem! ;)

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.