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.

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:
.

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!

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

• http://eventos.ithub.com.br/

Local

• Av. Ayrton Senna, 1501 – FM Empresarial, Bairro de Nova Parnamirim, Natal, RN (clique no endereço para ver o mapa)

Data e Horário

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

Programação

Inscrições

• http://eventos.ithub.com.br/inscricoes/

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.

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!

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!

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!

Há alguns meses eu conheci por indicação de um amigo uma forma de ouvir músicas online seja de que gênero ou nacionalidade for e o melhor: de graça!  Dá pra cadastrar lá, juntar sons favoritos, criar listas de reprodução, separar em pastas, pintar o 7. E o melhor músicas em quantidade de qualidade. Aquele som doidão de uma banda doidona que você gosta concerteza vai estar lá.

Então, eu que sou um defensor de  uma Web inteligente e eficiente convido-os à conhecer o Groove Shark!

Esse serviço aqui poucos conhecem. Ele é semelhante ao Twitter, o mesmo esqueminha de seguir amigos e ser seguido, porém com uma proposta um tanto diferente, a questão agora é: “PERGUNTE-ME ALGO”. Pode ser divertido perguntar algo a qualquer hora do dia à algum de seus seguidos ou não-seguidos. Experimenta e me conta o que achou!

Dá uma olhada:  http://www.formspring.me/sabbota

<script>alert(‘FELIZ NATAL!’);</script>

<?= “FELIZ NATAL!”  ?>

<%= “FELIZ NATAL” %>

Se você achava que num futuro próximo todos os navegadores “iriam falar a mesma língua” e a dor de cabeça de construir código compatível com todos eles iria acabar, pode tirar o cavalo da chuva, porque tem coisa revolucionária vindo por aí. Apresentando… o HTML 5!

Principal mudança entre o HTML atual para o 5 já deve ter sido imaginada por alguns desenvolvedores, está na Semântica, no significado da estrutura html do seu site. No momento em que estávamos acostumados a criar um <div id=”rodape”> agora a galera nos ajudou, bastando um <footer> , bem, além disso temos também o seguinte:

• Tags com valore semânticos.  adição de valores semânticos com a criação das geniais tags footer, header, time, nav por exemplo;
• Áudio e Vídeo.  incluir vídeo e áudio era coisa de outro mundo? não mais! Foram criadas as tags <audio> e <video> que fazem com que essas mídias sejam incluídas numa página sem a necessidade de plug-ins extras. Estuda-se até o caso de incluir legenda nesses vídeos, imagina só! Tudo isso totalmente “de grátis”;
• Desenhos dinâmicos. o novíssimo HTML 5 permite que você trabalhe com os arquivos vetoriais baseados em XML e com código aberto, os chamados SVG (Scalable Vetorial Graphics);
• Drag and Drop. sim, agora vai dar para mover objetos e customizar a experiência do usuário na página com apenas algumas poucas linhas de código;
• Geolocation API. você vai poder localizar os dados de um usuário facilmente, sem a necessidade de depender de sites externos para isso;
• Armazene dados no cliente. existirá uma espécie de base dados no computador do cliente, da até pra trabalhar offline! Isso vai dar pra fazer estrago com Javascript.

Essas novidades são o “coração” do novo HTML, mas a página que contém a documentação tem uma rolagem sem fim.

Mas eu já posso usar?

Na minha opinião pessoal eu acho que ainda não é viável cair de cabeça na utilização da liguagem, mas estudá-la já está na hora. A documentação ainda é muito nova, sua aplicação precisaria de uma flexibilidade para mudanças. A documentação final está prevista para 2012, então ainda há tempo.

Pense no seu público-alvo e faça seus testes com prudência. O Internet Explorer 6 e 7 não oferecem suporte ainda, porém existe um Javascript, capaz de fazer estes navegadores interpretarem HTML 5 ,  em todos os artigos que li para elaborar este meu os escritores e blogueiros não aconselham você esperar a empresa do tio Bill Gates para um suporte completo dos IE ao HTML 5, isto duria séculos, mas também não é pra menos né, até hoje não acertaram com o IE8. Já com o Chrome e o Firefox, apartir das versões 3.0,  a história é diferente e você consegue sim ver as mágicas acontecerem. 

E o que mais?

Tá aí…

<article>: Define um artigo.
<aside>: Define algum conteúdo relacionado ao artigo.
<audio>: Define um streaming de áudio em um documento HTML
<canvas>: Define a criação de gráficos em uma página web
<command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
<datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
<datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
<datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
<details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
<embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
<eventsource>: Define um destino para eventos enviados por um servidor.
<figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
<footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
<header>: Define o cabeçalho de uma seção ou documento.
<mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
<meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
<nav>: Define uma seção de links de navegação.
<nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
<output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
<progress>: Define o progresso de uma tarefa de qualquer tipo.
<rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
<section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
<source>: Define recursos para elementos de mídia, como <audio> e <video>.
<time>: Define tempo ou data, ou ambos.
<video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.

(fonte: pinceladas da web)

A W3C liberou a documentação oficial no meio do ano de 2009 mas ainda é passível de alterações portanto não é definitiva. Ela é a mais completa e confiável fonte de informações sobre a linguagem e você encontra aqui neste link. (inglês).

Existem exemplos?

 Haram… olha aí:

http://bit.ly/1Hw1ED (resize & drag and drop de fotos)
http://bit.ly/HkYnp (post-its que são arrastados e armazenados offline)
http://www.html5gallery.com (galeria de sites em html5)
http://bit.ly/fPMxn (resize & drag and drop de videos)
http://bit.ly/2F3i1K (desenho escalável de um tigre em SVG)
http://bit.ly/1Hw1ED (resize & drag and drop de fotos)

(fonte: Luiz Tiago)

E afinal?

É uma questão sem solução atualmente adequada. Se por um lado existe um suporte à navegadores desatualizados o que cria a disponibilidade à todos os seus usuários, por que não usar?  Por outro lado, se ainda não existe uma documentação finalizada e consistente, para que começar?

Fica com você!

Vamos discutir sobre o assunto?